Tenon-UI Documentation

Code on GitHub

Smart form required knowledge

Depending on how much of the functionality you use, you may be confronted with some advanced React concepts.

Child render props

Using the standard props.children prop as a render prop is used prolifically in the forms components.

Example:


            

            

Prop getter functions

Tenon-ui allows you to implement your own view components while still making use of the data and accessibility engine provided.

Whereas we would like you to use our view components, as they will ensure accessibility of the components themselves, we also understand that UI component libraries are often too restrictive and not every application and design you may need to code can be solved with the same static views.

Tenon-ui exposes its data and accessibility engine through prop getter functions injected into render functions via children render props.

These functions allow you, not only to access the prop needed to drive your views, but also to override and enrich the standard set of props given:


            

            

The specifics around the Tenon-ui components will be discussed later, but if the way this code snippet gives props to the <label> and <input> elements are not clear, please read this blog post about prop getters by Kent C. Dodds.