Inplace editor for react apps
npm install react-inplace-editor> This library allows to create inline editor with input or textarea.
 
``bash`
npm install --save react-inplace-editor
jsx
import React, { Component } from 'react'
import InplaceEditor from 'react-inplace-editor'class Example extends Component {
render() {
return (
withChangesSubmitOnEnter
defaultInputValue="init value"
onChange={(value) => { console.log(value) }}
inputProps={{
className: 'example-styles-class',
}}
/>
);
}
}
`$3
jsx
import React, { Component } from 'react'
import InplaceEditor from 'react-inplace-editor'class Example extends Component {
render() {
return (
withChangesSubmitOnEnter={false}
defaultInputValue="init value"
onChange={(value) => { console.log(value) }}
activator={
Click me for textarea showing!}
/>
);
}
}
`Customization
InplaceEditor allows to pass custom input as children.
It is usefull for custom styled inputs like inputs from antd.
jsx
import React, { Component } from 'react'
import InplaceEditor from 'react-inplace-editor'class Example extends Component {
render() {
return (
onChange={(value) => { console.log(value) }}
activator={
Click me for textarea showing!}
>
{ console.log('this onChange will be called too') }} />
);
}
}
`Available props
#### onChange
Handler for input changes.
jsx
onChange={(value) => { console.log(value)}}
`#### activator
React component responsible for input displaying.
jsx
activator={Click on me!}
`#### valuePresenter
Custom presentation for saved value.
jsx
valuePresenter={(value) => {Result: ${value}}}
`#### withChangesSubmitOnEnter
Allows input submittion by Enter key down. Default value is true.
jsx
withChangesSubmitOnEnter={false}
`#### inputProps
Custom props for built in input. Useless with custom input.
jsx
inputProps={{ className: "example-class" }}
`#### defaultInputValue
Default value for input.
jsx
defaultInputValue="default value"
`#### emptyValue
Presenter for empty input value. Displaying only when input value is empty.
jsx
emptyValue="Input value is empty!"
`#### as
Built in input type. Available: input, textarea. Default value is 'input'.
jsx
as="textarea"
`#### closeOnOutsideClick
Close input on outside click. Default value is true.
jsx
closeOnOutsideClick={false}
``MIT © [](https://github.com/)