Introduction
libreact is a collection of most essential React utilities you will probably need in any project.
Render prop and FaCC notation is used interchangeably as most libreact
components support both interfaces. Also, most render prop components support
component prop interface, with the following precedence:
- FaCC
- Render prop
- Component prop
Render props
Render props are components which have props that start with render* and accept a function that
returns a React element, for example:
<App
renderNavigation={() => <Navigation />}
renderBody={() => <Body />}
renderFooter={() => <Footer />}
/>
Where the function like () => <Navigation /> "renders" the navigation.
Typically though a render prop component will have only one render* prop, in that case
we simply call it render.
<MouseSensor render={({posX, posY}) => <div />} />
FaCC
FaCC or Function as a Child Component is a special case of render prop where the single
render prop is called children instead.
<MouseSensor children={({posX, posY}) => <div />} />
FaCC notation is superior to a single render prop notation, because you can put the rendering function into props, as above, or place it as a child in JSX tree, which allows your "HTML" markup to have natural spacing.
<MouseSensor>{({posX, posY}) =>
<div />
}</MouseSensor>
FaCCs are especially convenient when you use hyperscript function h to create your
React elements, because you don't have to type the closing tag and create a props object unnecessarily.
h(MouseSensor, null, ({posX, posY}) => h('div')})
Component prop
Component prop is when a component expects a component or comp prop that
itself is a component.
<Route match='/home' comp={Home} />
<Route match='/user' component={User} />
libreact supports both ways of component prop (comp and component). Normally, when a component has a
render prop interface it will also support the component prop interface.
HOC
HOC or Higher Order Component is a function that receives AND/OR returns React components.
Enhancer
Enhancer is a HOC that receives AND returns React components.