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' state = text: 'edit me' { this } { return <EditButton => <span> thisstatetext </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 | |
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