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

Styles

Customization

Validation

Form helpers (submit forms programmaticaly)

More validation examples

Requirements

React 16.8.0 and above (the one with hooks).

npm i leda