CN React Helpers

Some useful react utilities.

Install

  $ npm install cn-react-helpers

Development

Made with create-react-library

Test

  $ npm test

Build

  $ npm run build

Components

Show

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

function App(){
  return (
    <Show if={true}>
      <h1> hello world! <h1/>
    </Show>
  )
}

if - boolean - condition to show the component

---

Hide

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

function App(){
  return (
    <Hide if={true}>
      <h1> hello world! <h1/>
    </Hide>
  )
}

if - boolean - condition to hide the component

---

Each

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

---

Filter

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

---

Truncate

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

---

License

MIT © C4co