Customization

You have access to component elements by using ...Render props.

E.g. wrapperRender gives you access to the outer wrapper of a component.

Each ...Render prop requires a function:

RenderEvent => React.ReactNode

Each component has its own set of customizators, see the documentation.

RenderEvent props

Name	Description
Element	The element, use it or replace it to a different one
elementProps	Element props, all you need to make the element work properly
componentProps	Component props in case you need something from the outer space
componentState	The component state in case you need to know what is going on in there

Adding attributes to elements:


<L.Input
  inputRender={({ Element, elementProps }) => <Element {...elementProps} aria-test-attribute />}
  _w-48
/>

Completely replacing Element with another:


<L.Input
  wrapperRender={({ elementProps }) => <span {...elementProps} />}
  _w-48
/>

Or make a whatever combination you like.

The only thing is that a valid React node must be returned.