react-component-strategy-map
v0.0.1
Published
React component for rendering out components based on key value pair
Downloads
5
Readme
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 |