# react-perf-container

> A GUI react-addons-perf wrapper to measure a React component's performance

Latest version **0.0.2** (published 2018-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-perf-container
pnpm add react-perf-container
yarn add react-perf-container
bun add react-perf-container
```

## 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.0.2 |
| Published | 2018-04-01 |
| First published | 2018-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Yusuke Goto |
| Maintainers | ygoto3 |
| Keywords | react, perf, react-addons-perf, javascript |

## Links

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

## Dependencies (1)

- [recompose](https://npm.io/package/recompose.md) ^0.26.0

## 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.0.2 (latest) — 2018-04-01
- 0.0.1 — 2018-04-01

## README

# react-perf-container

A GUI react-addons-perf wrapper to measure a React component's performance

![The controller](./assets/screen-shot.png)
![Print](./assets/screen-shot-print.png)

## Requirement

- React v15
- react-addons-perf v15

## Install

```sh
$ npm install react-perf-container --save-dev
```

## Usage

You can wrap any React component with `withPerf()`.  `withPerf()` receives props and keeps all of them in its state.  When a given action fires to make changes to the state, then the perf container starts performance measurement, passes the updated values to the target React component, and finally stops the measurement.

```js
import withPerf from 'react-perf-container';

const Example = ({ items }) => (
  <ul>
    { items.map(item => <li>{ item.title }: { item.description }</li>) }
  </ul>
);

const Perf = (
  withPerf({
    props: {
      items: [
        { title: 'Item : 1', description: `Item 1 comes here` },
        { title: 'Item : 2', description: `Item 2 comes here` },
      ],
    },
    actions: {
      'Add Item': function (end) {
        const items = this.state.items.concat({ title: 'Item : 3', description: `Item 3 comes here` });
        this.setState({ items }, end);
      }
    },
  })(({ items }) => (
    <Example items={ items } />
  ));
);
```

Then you can use it like an ordinary React component.

```js
<Perf />
```

### Parameters

`withPerf()` takes the following parameters:

| Name | Description | Default Value |
| --- | --- | --- |
| props | A Props object you want to pass to the target React component. | - |
| actions | A collection of functions to make changes to the target React component. | - |
| defaultPrintTypes | A collection of print types with which you want to print actions' performance measurement. | `{ printWasted: true }` |

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