react-content-editable

A Component for making element's content editable with input like features (e.g. max length)

Installation

npm i @benson.liao/react-content-editable

Demo

demo link

Usage

const React = require('react');
const {useState} = require('react');
const ContentEditable = require('@benson.liao/react-content-editable').default;

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

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

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

# es6
import React, { useState } from 'react'
import ContentEditable from "@benson.liao/react-content-editable";

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

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

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

Editable Text

<Editable
  tag="p"
  maxLength='20'
  onChange={onChange}
  value={data}
/>

Editable Text Read only

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

Contributing

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

Todo

Improve onPaste handler