# cn-react-helpers

> some react helpers

Latest version **1.0.2** (published 2021-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install cn-react-helpers
pnpm add cn-react-helpers
yarn add cn-react-helpers
bun add cn-react-helpers
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-02-26 |
| First published | 2019-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | C4co |
| Maintainers | c4co |

## Links

- npm: https://www.npmjs.com/package/cn-react-helpers
- Repository: https://github.com/C4co/cn-react-helpers
- Homepage: https://github.com/C4co/cn-react-helpers#readme
- Issues: https://github.com/C4co/cn-react-helpers/issues
- npm.io page: https://npm.io/package/cn-react-helpers

## Recent versions

- 1.0.2 (latest) — 2021-02-26
- 1.0.1 — 2021-02-13
- 1.0.0 — 2020-12-21
- 0.1.15 — 2020-04-25
- 0.1.14 — 2020-04-05
- 0.1.13 — 2020-03-31
- 0.1.12 — 2020-03-30
- 0.1.11 — 2020-03-30
- 0.1.10 — 2020-03-30
- 0.1.9 — 2020-03-30
- 0.1.8 — 2020-03-22
- 0.1.7 — 2020-03-22
- 0.1.6 — 2020-03-21
- 0.1.5 — 2020-03-21
- 0.1.4 — 2020-03-21
- … 4 more at https://npm.io/package/cn-react-helpers/versions

## README

<p align="center">
  <img alt="react" src="https://i.imgur.com/DrE0cgt.png" width="100" />
</p>

<h1 align="center">
  CN React Helpers
</h1>

[![Maintainability](https://api.codeclimate.com/v1/badges/35fba2716be7a4167258/maintainability)](https://codeclimate.com/github/C4co/cn-react-helpers/maintainability)
[![Coverage Status](https://coveralls.io/repos/github/C4co/cn-react-helpers/badge.svg?branch=master&service=github)](https://coveralls.io/github/C4co/cn-react-helpers?branch=master)
[![Build Status](https://www.travis-ci.com/C4co/cn-react-helpers.svg?branch=master)](https://www.travis-ci.com/C4co/cn-react-helpers)
![npm](https://img.shields.io/npm/v/cn-react-helpers?color=green)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)

Some useful react utilities.

### Install
```
  $ npm install cn-react-helpers
```

### Development

> Made with create-react-library

Test
```
  $ npm test
```

Build
```
  $ npm run build
```

### Components

<details>
  <summary> Show </summary>

  ```js
  import { Show } from "cn-react-helpers"

  function App(){
    return (
      <Show if={true}>
        <h1> hello world! <h1/>
      </Show>
    )
  }
  ```
  ```if``` - *boolean* - condition to show the component
</details>


----

<details>
  <summary> Hide </summary>

  ```js
  import { Hide } from "cn-react-helpers"

  function App(){
    return (
      <Hide if={true}>
        <h1> hello world! <h1/>
      </Hide>
    )
  }
  ```
  ```if``` - *boolean* - condition to hide the component
</details>

---

<details>
  <summary> Each </summary>

  ```js
  import { Each } from "cn-react-helpers"

  function App(){
    return (
      <Each items={["first", "second", "third"]}>
        {(item, index) => (
          <h1>
            {index}-{item}
          </h1>
        )}
      </Each>
    )
  }
  ```
  ```items``` - *array* - iterate items

  ```children``` - *function(index, item, arr)* - returns items
</details>

----

<details>
  <summary> Filter </summary>

  ```js
  import { Filter } from "cn-react-helpers"

  function App(){
    return (
      <Filter items={[1, 2, 3]} if={item => item > 1}>
        {(item, index) => (
          <h1>
            {index}-{item}
          </h1>
        )}
      </Filter>
    )
  }
  ```
  ```items``` - *array* - filtable elements

  ```children``` - *function(index, item, arr)* - returns filtered elements
</details>

----

<details>
  <summary> Truncate </summary>

  ```js
  import { Truncate } from "cn-react-helpers"

  function App(){
    return (
      <Truncate size={3} end="...">
        Hello world
      </Truncate>
    )
  }
  ```
  ```size``` - *number* - string length

  ```end``` - *string* - custom end of string
</details>

----

### License

MIT © [C4co](https://github.com/C4co)

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