react-editable-title
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published

react-editable-title Build Status

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}
         />
  )
}
 

Edit 7w063kppz6

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.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate. Thanks 🙌

License

GPL

Package Sidebar

Install

npm i react-editable-title

Weekly Downloads

51

Version

1.3.1

License

MIT

Unpacked Size

64.2 kB

Total Files

13

Last publish

Collaborators

  • ceamkrier