Leda the React components library
Hi!
This is the simplest Leda form
() => { return ( <> <L.Input form="leda-simplest-form" name="input" _w-60 _mb-4 /> <L.Button form="leda-simplest-form" onClick={({ form }) => { log(form) }} > Submit </L.Button> </> ) }
Components can be controlled or uncontrolled, all form data can be retrieved from the onClick event.
To create a form just put the same name to the form attribute.
Many examples use L. notaition. It is because we imported Leda as follows import * as L from '@leda'
. It is just the namespace to let you use any Leda component in the live edit window.
_w-60
and _mb-4
stand for className="mb-4 w-60"
. It gets handy when you need conditional CSS class names.
() => { const [isColored, setIsColored] = React.useState(false) return ( <> <L.Div _mb-4 _text-sky-600={isColored} > Hello world! </Div> <L.Button onClick={() => setIsColored(!isColored)} _mb-4> Toggle color </Button> </> ) }
Leda components can have both className and _your-class-name props.
Adding CSS classes to other component elements
() => { return ( <> <L.Input form="leda-simplest-form-2" name="input" isRequired theme={{ wrapper: 'ld-wrapper w-60 mb-4', inputWrapperRequired: 'border-orange-300' }} /> <L.Button form="leda-simplest-form-2" onClick={({ form }) => { log(form) }} > Submit </L.Button> </> ) }
And much more
Requirements
React 16.8.0 and above (the one with hooks).
npm i leda