React-beyond NPM

react-beyond

React Beyond lets you define higher-order components which recursively re-apply themselves on the child components. You can create features that are available to the entire tree. It opens up new exciting possibilities in React to create more intuitive code.

Installation

npm install react-beyond

Create a new feature

const BeyondComponent = beyond(Component, config)

Example

API

beyond(cmp, config): ReactComponent

It applies a React Beyond configuration to the component cmp and returns the new component. The configuration will be applied to all descendants of cmp as well.

cmp: The root component that you want to apply the configuration to.
config: The configuration object. See below.

Config object

Property	Type	Description
id	string	The id of the HOC. Must be a unique string. This will appear appear next to the components in React DevTools.
mapComponent?	(cmp: FC) => FC	A function that maps a component to a new component. If defined, all the components under the deep HOC will be mapped with this function. This function is called once per mounted components.
invokeRender?	(render, props, ref) => ReactElement	A function which invokes the base component with the passed `props` and `ref`. If defined, all the components under the deep HOC will be rendered through this function. `render` is always the render function, unwrapped from eventual `forwardRef` and/or `memo` wrappings. This function is called once per render. Defaults to `(render, props, ref) => render(props, ref)`
mapElement?	(el: ReactElement, magicPropValue?: any) => ReactElement	A function that maps `el` to a new element. If defined, all elements under the deep HOC will be mapped with it. `magicPropValue` will only be passed, when `magicProp` is defined; see below.
directiveProp?	string	If defined, `mapElement` will only be called, if a JSX element has a prop with `<magicProp>` prop name. If so, React Beyond removes the magic prop from the props object, and calls `mapElement` with (originalProps, magicPropValue).