react-baybayin v0.1.0

react-baybayin

Simple in-browser code editor, inspired by CodeFlask

Install

npm install --save react-baybayin

yarn add react-baybayin

Usage

import { useEditor, setCDN } from 'react-baybayin';

setCDN('https://unpkg.com/shiki/');

function App() {
  const [targetRef, loading] = useEditor<HTMLDivElement>({
    // The value of the editor. This can be controlled.
    value: "console.log('Hello World')",
    // The languages loaded for the editor to use.
    // The first language in the array is the selected
    // language by default.
    languages: ['javascript'],
    // The themes loaded for the editor to use.
    // The first theme in the array is the selected
    // language by default.
    themes: ['github-dark'],
    // Show/hide line numbers
    lineNumbers: true,
    // Set the editor to readonly
    readonly: true,
    // Listen to the changes
    onChange(newValue) {
      console.log('Received:', newValue);
    },
    // Listen to errors
    onError(error) {
      console.log('Caught:', error);
    },
  });

  return (
    <div ref={targetRef} />
  )
}

export default App;

License

MIT © lxsmnsyc