# react-container-as-prop

> Attach React Container as a prop to Component

Latest version **0.2.6** (published 2018-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-container-as-prop
pnpm add react-container-as-prop
yarn add react-container-as-prop
bun add react-container-as-prop
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.6 |
| Published | 2018-09-13 |
| First published | 2018-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Souvik Basu |
| Maintainers | souvikbasu |
| Keywords | react, container, component, container-as-prop |

## Links

- npm: https://www.npmjs.com/package/react-container-as-prop
- Repository: https://github.com/souvikbasu/react-container-as-prop
- Homepage: https://github.com/souvikbasu/react-container-as-prop#readme
- Issues: https://github.com/souvikbasu/react-container-as-prop/issues
- npm.io page: https://npm.io/package/react-container-as-prop

## Dependencies (5)

- [path](https://npm.io/package/path.md) ^0.12.7
- [webpack](https://npm.io/package/webpack.md) ^2.2.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^2.3.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.26.0
- [babel-plugin-transform-class-properties](https://npm.io/package/babel-plugin-transform-class-properties.md) ^6.24.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.6 (latest) — 2018-09-13
- 0.2.5 — 2018-09-07
- 0.2.4 — 2018-09-07
- 0.2.3 — 2018-09-07
- 0.2.2 — 2018-09-06
- 0.2.1 — 2018-09-06
- 0.1.1 — 2018-09-05
- 0.1.0 — 2018-09-05

## 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](https://codesandbox.io/s/jjw8881kyy)

#### App.js

```js
import React from "react";

export default class App extends React.Component {
  render() {
    return (
      <div>
        <PersonName container={PersonData} />
        <PersonNameReversed container={PersonData} />
        <Country container={CountryData} />
      </div>
    );
  }
}
```

#### PersonData.js

```js
import { BaseContainer } from "react-container-as-prop";

export default class PersonData extends BaseContainer {
  getData() {
    return { firstName: "Bhagat", lastName: "Singh" };
  }
}
```

#### 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 (
      <div>
        <div>
          {firstName} {lastName}
        </div>
      </div>
    );
  }
}
```


#### 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 (
      <div>
        <div>
          {lastName}, {firstName}
        </div>
      </div>
    );
  }
}
```




### Development

To run the demo locally

```bash
git clone git@github.com:souvikbasu/react-container-as-prop.git
cd react-container-as-prop/demo
yarn
yarn start
open http://localhost:3000
```

---
_Source: https://npm.io/package/react-container-as-prop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._