Leda the React components library

Forms and validation

• 22 components to build forms
• declarative forms and validation

Start as easy as this:

<>
  <Input
    form="myForm" name="someName"
    _w-60 _mb-4 // tailwind css classes
  />

  <Button
    form="myForm"
    onClick={({ form }) => {
      log(form) // prints form data to the console
    }}
  >
    Submit
  </Button>
</>

More on forms and validation

CSS classes

_w-60 and _mb-4 stand for className="mb-4 w-60". It gets handy when you need conditional CSS class names.

Leda components can have both className and _your-class-name props.

() => {
  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>
      
    </>
  )
}

Many examples use L. notaition. We have imported Leda as follows: import * as L from '@leda'.

L is just a namespace to get access to any Leda component in the live edit window.

Themes

All colors, sizes and other numeric values have corresponding css variables so you can change everything to make components look different.

Also each component has a theme prop to add/replace css classes of any HTML element within the component.

<L.Input
  theme={{
    wrapper: 'ld-wrapper w-60 mb-4',
    inputWrapper: 'ld-input-element-wrapper border-sky-500 hover:border-sky-700',
  }}
/>

Requirements

React 16.8.0 and above (the one with hooks).

npm i leda

Further reading

Styles

Customization

Form helpers (submit forms programmaticaly)

More validation examples