Create Renderable & Editable Content With useEditable Hook

Description:

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