https://github.com/shaunevening/react-component-strategy-map
React component for rendering out components based on key value pair
https://github.com/shaunevening/react-component-strategy-map
react react-typescripts state-machine typescript
Last synced: about 1 year ago
JSON representation
React component for rendering out components based on key value pair
- Host: GitHub
- URL: https://github.com/shaunevening/react-component-strategy-map
- Owner: ShaunEvening
- Created: 2018-08-05T02:13:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-05T23:16:06.000Z (over 7 years ago)
- Last Synced: 2025-03-18T13:05:38.696Z (about 1 year ago)
- Topics: react, react-typescripts, state-machine, typescript
- Language: TypeScript
- Size: 3.91 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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`:
```bash
yarn add react-component-strategy-map
```
Import and use:
```ts
import { RenderComponentStrategy } from 'react-component-strategy-map';
const componentStrategyMap = {
someKey: SomeComponent,
someOtherKey: SomeOtherComponent,
};
const MainComponent = () => (
Rendered default}
/>
);
```
### 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 |