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