A Component for making text editable with input like features

Installation

npm i react-text-content-editable

Demo

https://mpcv6.csb.app/ https://mpcv6.codesandbox.io/

Usage

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

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

  const onChange = (value) => {
    setText(value)
  }

  return (
        <Editable 
            tag='p'
            type='text'
            maxLength='20'
            onChange={onChange}
            value={text}
         />
  )
}

Editable Text

<Editable
    tag="h1"
    type='text'
    maxLength='20'
    onChange={onChange}
    value={data}
/>

Editable Text Read only

<Editable
    tag="h1"
    type='text'
    maxLength='20'
    onChange={onChange}
    readOnly={true}
/>

Contributing

We would love some contributions! Check out this document to get started.