useEditable is a small React hook that enables elements to be contenteditable while still being fully renderable.
It aims to allow any element to be editable while still being able to render normal React elements to it — no innerHTML
and having to deal with operating with or rendering to raw HTML, or starting a full editor project from scratch.
Install & Import:
# Yarn $ yarn add use-editable # NPM $ npm i use-editable --save
import React, { useState, useRef } from 'react'; import { useEditable } from 'use-editable';
Basic usage:
const RainbowCode = () => { const [code, setCode] = useState('function test() {}\nconsole.log("hello");'); const editorRef = useRef(null); useEditable(editorRef, setCode); return ( <div className="App"> <pre style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }} ref={editorRef} > {code.split(/\r?\n/).map((content, i, arr) => ( <React.Fragment key={i}> <span style={{ color: `hsl(${((i % 20) * 17) | 0}, 80%, 50%)` }}> {content} </span> {i < arr.length - 1 ? '\n' : null} </React.Fragment> ))} </pre> </div> ); };
Preview:
Download Details:
Author: kitten
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/kitten/use-editable
License: MIT