react-easy-edit
  • โžก๏ธGetting started
  • ๐Ÿ”ฅMigration Guide to v2.0.0
  • ๐Ÿ“–Props
  • ๐Ÿ‘€Examples
    • Auto Cancelling
    • Auto Submitting
    • Button Positioning
    • Custom Buttons ๐Ÿ”ฅ
    • Custom Display Component
    • Custom Input Component
    • Preventing Edit
    • OnBlur
    • Enable the Delete button ๐Ÿ”ฅ
    • Toggle edit mode for multiple components ๐Ÿ”ฅ
  • ๐Ÿ‘พStyling
  • ๐Ÿ†—Validation
  • ๐ŸคContribute
Powered by GitBook
On this page
  1. Examples

Custom Input Component

PreviousCustom Display ComponentNextPreventing Edit

Last updated 4 years ago

When using custom input components, they must be passed in as props, like so:

<EasyEdit    
    type="text"
    onSave={() => {}}
    editComponent={<CustomInput />}    
    displayComponent={<CustomDisplay />}
/>

When defining a custom input component, the function setParentValue is injected into your custom component, which must be called in order to pass the desired value up to the parent EasyEdit component.

For example, if your component was a text field that needed to set the EasyEdit value as a user id based on a username entered, you would need to pass the id to this.props.setParentValue in order to get that value to the EasyEdit component.

e.g.

// Inside your custom 
inputโ€‹onChange(searchTerm) {
    getUserIdByUsername(searchTerm).then((userId) => {
    this.props.setParentValue(userId);
})}

๐Ÿ‘€