React-editable-title NPM

react-editable-title

An editable title implementation for react.

Installation

npm install react-editable-title

Usage

import React, { useState } from 'react'
import Editable from 'react-editable-title'

const App = () => {
  const [text, setText] = useState('')

  const handleTextUpdate = (current: string) => {
    setText(current)
  }

  return (
        <Editable 
          text={text} 
          editButton
          editControls
          placeholder="Type here"
          cb={handleTextUpdate}
         />
  )
}

API

Attribute	Type	Description	Required
`text`	`string`	Text to be displayed	Yes
`textStyle`	`CSSProperties`	Custom text styling	No
`cb`	`function`	Invoked when the text has been edited	Yes
`onEditCancel`	`function`	Invoked when the edit has been canceled	No
`onValidationFail`	`function`	Invoked when the text hasn't matched the regex	No
`editButton`	`boolean`	Sets the visibility of the edit button. Default is `false`	No
`editButtonStyle`	`CSSProperties`	Custom edit button styling	No
`editControlButtons`	`boolean`	Sets the visibility of the control buttons. Default is `false`	No
`saveButtonStyle`	`CSSProperties`	Custom save button styling	No
`cancelButtonStyle`	`CSSProperties`	Custom cancel button styling	No
`placeholder`	`string`	Placeholder text of the input element	No
`saveOnBlur`	`boolean`	Attempts to save text input on unfocus. Default is `true`	No
`seamlessInput`	`boolean`	Presents text-editor alike experience. Default is `false`	No
`inputStyle`	`CSSProperties`	Custom input styling	No
`isFocused`	`boolean`	Externally sets the state of input focus. Default is `false`	No
`inputPattern`	`string`	Regex pattern of desired input	No
`inputErrorMessage`	`string`	Info message about mismatch of input	No
`inputErrorMessageStyle`	`CSSProperties`	Custom error message styling	No
`inputMinLength`	`number`	Min length accepted as an input	No
`inputMaxLength`	`number`	Max length accepted as an input	No

Features

The component can be controlled by keyboard keys. Hit Enter to save or Esc to cancel your edit. If there is no change in the text, neither Enter nor the Edit button would work.

You also can control the validity of inputs with the regex you would provide. If the regex won't match the user input then your desired error message will be shown below of the input field.