<h1 align="center">J.A.R.L.E</h1> <p align="center"> <strong>Just Another React Live Editor</strong> </p>
Just Another React Live Editor
JARLE is a as lightweight but feature-rich React component editor with live
preview. JARLE uses sucrase for fast, minimal
compilation of JSX and/or Typescript.
``js
import { Provider, Editor, Error, Preview } from 'jarle';
function LiveEditor() {
return (
);
}
`
See https://jquense.github.io/jarle/ for docs.
Jarle removes boilerplate code in your examples, by rendering the last expression in your code block.
Define variables, components, whatever, as long as the last line is a JSX expression.
`js
function Example({ subject }) {
return
}`
/>
If you do need more control over what get's rendered, or need to render asynchronously, a
render function is always in scope:
`js`
setTimeout(() => {
render(I'm late!);
}, 1000);
Jarle also supports rendering your code _as a component_, helpful for illustrating
hooks or render behavior with minimal extra code. When using renderAsComponent
the code text is used as the body of React function component, so you can use
state and other hooks.
`js
code={
const [secondsPast, setSeconds] = useState(0)
useEffect(() => {
let interval = setInterval(() => {
setSeconds(prev => prev + 1)
}, 1000)
return () => clearInterval(interval)
}, [])
}
/>
``