https://github.com/guilhermelimak/react-codejar

https://github.com/guilhermelimak/react-codejar

Last synced: 7 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/guilhermelimak/react-codejar
• Owner: guilhermelimak
• Created: 2020-04-01T20:15:26.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T18:14:32.000Z (almost 2 years ago)
• Last Synced: 2024-10-02T07:17:59.900Z (about 1 month ago)
• Language: TypeScript
• Size: 1.78 MB
• Stars: 63
• Watchers: 2
• Forks: 4
• Open Issues: 26
• Metadata Files:
  • Readme: README.html

Awesome Lists containing this project

README

        


README.html

 body { box-sizing: border-box; max-width: 740px; width: 100%; margin: 40px auto; padding: 0 10px; } document.addEventListener('DOMContentLoaded', () => { document.body.classList.add('markdown-body'); document.querySelectorAll('pre[lang] > code').forEach((code) => { code.classList.add(code.parentElement.lang); }); document.querySelectorAll('pre > code').forEach((code) => { hljs.highlightBlock(code); }); });

react-codejar



React wrapper around the CodeJar library





Install

npm install --save react-codejar

Usage

import React, { Component, useState } from "react";


// You can choose to use the component or the hook

import { ReactCodeJar, useCodeJar } from "react-codejar";

const highlight = editor => {

  let code = editor.textContent;

  code = code.replace(/\((\w+?)(\b)/g, '(<font color="#8a2be2">$1</font>$2');

  editor.innerHTML = code;

};

const ComponentExample = () => {

  const [code, setCode] = useState('(format t "lisp example")');

  return (

    <ReactCodeJar

      code={code} // Initial code value

      onUpdate={setCode} // Update the text

      highlight={highlight} // Highlight function, receive the editor

    />

  );

};

const HookExample = () => {

  const [code, setCode] = useState('(format t "lisp example")');

  const editorRef = useCodeJar({

    code, // Initial code value

    onUpdate: setCode, // Update the text

    highlight // Highlight function, receive the editor

  });

  return <div ref={editorRef}></div>;

};

License

GPL3 © guilhermelimak