react-plaintexteditable

React component for plain text contenteditable element. You can use it as textarea or text input replacement that automatically resize.

Install

npm install react-plaintexteditable

Usage

import React, { useState } from 'react'
import PlainTextEditable from 'react-plaintexteditable'

function MyComponent() {
    const [text, setText] = useState('Hello, World!')

    return <PlainTextEditable style={{caretColor: '#43c633'}} text={ text } onChange={ setText } />
}

Number only example

import React, { useState } from 'react'
import PlainTextEditable from 'react-plaintexteditable'

function NumberOnly() {
    const [text, setText] = useState('')

    const onChange = (val) => {
        setText(val.replace(/[^0-9]/g, '').replace(/^0+/, ''))
    }

    return <PlainTextEditable style={{caretColor: '#43c633'}} text={ text } onChange={ onChange } />
}