1.0.2 • Published 5 years ago
react-edit-button v1.0.2
react-edit-button
A React wrapper component for making any html element's text editable
Install
npm install --save react-edit-button
or
yarn add react-edit-button
Usage
The basic usage of React Edit Button only requires two props - an onAccept
function and an html element child that has text as it's child.
import React, { Component } from 'react'
import EditButton from 'react-edit-button'
class Example extends Component {
state = {
text: 'edit me'
}
onAccept = (text) => {
this.setState({ text })
}
render () {
return (
<EditButton onAccept={handleOnAccept}>
<span>{ this.state.text }</span>
</EditButton>
)
}
}
Props
Prop | Type | Required | Default | Note | ||
---|---|---|---|---|---|---|
containerProps | object | No | undefined | Props applied to the container element. | ||
editButtonProps | object | No | {} | Props applied to the edit button. | ||
editButtonProps.text | string | No | 'Edit' | Replace the edit button text. | ||
editButtonProps.icon | any | No | Replace the default edit button icon with anything. | |||
editMode | boolean | No | undefined | Manually control edit mode. | ||
hideEditButton | boolean | No | undefined | Manually control showing and hiding the edit button. | ||
hoverToShowEditButton | boolean | No | false | Will hide the edit button by default and show it on hover of the wrapped element. | ||
inputProps | object | No | {} | Props for the input element. | ||
inputProps.onChange | function | No | undefined | Function fired on input change. | ||
inputProps.placeholder | string | No | undefined | Input placeholder text. | ||
inputProps.value | string | number | No | undefined | Value shown in the input (can be different than displayed text in wrapped elelent) | |
onAccept | function | Yes | undefined | Function that is fired when the accept button is clicked. | ||
onContainerClick | function | No | undefined | Function that is fired when the content container is clicked. | ||
onEditButtonClick | function | No | undefined | Function that fires when the edit button is clicked. | ||
onReject | function | No | undefined | Function that is fired when the reject button is clicked. |
License
MIT © stackfive