https://github.com/souvikbasu/react-container-as-prop
Attach React Container as a prop to Component
https://github.com/souvikbasu/react-container-as-prop
Last synced: 2 months ago
JSON representation
Attach React Container as a prop to Component
- Host: GitHub
- URL: https://github.com/souvikbasu/react-container-as-prop
- Owner: souvikbasu
- License: mit
- Created: 2018-09-05T11:53:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-13T04:04:32.000Z (over 6 years ago)
- Last Synced: 2025-02-09T04:41:20.360Z (3 months ago)
- Language: JavaScript
- Size: 152 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-container-as-prop
Attach React Container as a prop to Component
### Installation
**npm**
```bash
npm install react-container-as-prop --save
```
**yarn**
```bash
yarn add react-container-as-prop
```
### PlayGround
Click [here](https://codesandbox.io/s/jjw8881kyy) for live demo
### Why Container as Prop?
Say you want to show person full name on screen. Ideally you will have a container to fetch data and a component to visualize data. PersonContainer to fetch Person data would return a json with first and last name.
#### PersonContainer.js
```js
import { BaseContainer } from "react-container-as-prop";
export default class PersonContainer extends BaseContainer {
getData() {
return { firstName: "Bhagat", lastName: "Singh" };
}
}
```
And PersonName component to show full name of the person using `firstName` and `lastName` props
#### PersonName.js
```js
import React from "react";
import { BaseComponent } from "react-container-as-prop";
export default class PersonName extends BaseComponent {
render() {
const { firstName, lastName } = this.props;
return (
{firstName} {lastName}
);
}
}
```
Similarly, in another component you want to show the same name in reversed order as `LAST NAME, FIRST NAME`
#### PersonNameReversed.js
```js
import React from "react";
import { BaseComponent } from "react-container-as-prop";
export default class PersonNameReversed extends BaseComponent {
render() {
const { firstName, lastName } = this.props;
return (
{lastName}, {firstName}
);
}
}
```
Although the inner components are different, the container fetching data is the same. So instead of creating separate containers for different ways of visualization, you can simple pass the container as prop to the component.
This allows reusability of the container agnostic of the rendering of the data.
#### App.js
```js
import React from "react";
export default class App extends React.Component {
render() {
return (
);
}
}
```
### Development
To run the demo locally
```bash
git clone [email protected]:souvikbasu/react-container-as-prop.git
cd react-container-as-prop/demo/01-simple-case
yarn
yarn start
open http://localhost:3000
```
If you like the idea, please :star: this repo