react-component-strategy-map

react-componet-strategy-map

A react component for rendering the correct component from a strategy map based on the given key.

How to use

Add to your package.json:

yarn add react-component-strategy-map

Import and use:

import { RenderComponentStrategy } from 'react-component-strategy-map';

const componentStrategyMap = {
  someKey: SomeComponent,
  someOtherKey: SomeOtherComponent,
};

const MainComponent = () => (
  <RenderComponentStrategy
    componentStrategy={componentStrategyMap}
    componentKey="someKey"
    renderDefault={() => <div>Rendered default</div>}
  />
);

Available Props:

Prop	Optional	Type	Default	Description
componentStrategy	false	{[key: string]: React.ComponentType}	{}	Map of components used to render based on the given "componentKey"
componentKey	false	string	""	key to the desired component to render from "componentStrategy"
componentProps	true	object	{}	And object of props to spread onto the rendered component
renderDefault	true	React.ComponentType	null	React component to render if "componentKey" does not match a key in "componentStrategy". If no default is given, component will return null