React Haiku

An awesome collection of React Hooks & Utilities!

---

Links

• Official Docs

What is this?

Haiku is a simple & lightweight React library with the goal of saving
you time by offering a large collection of hooks & utilities that will
help you get the job done faster & more efficiently!

Install

Installing Haiku is very easy!
Requires React >=16.8.0

NPM

npm install react-haiku

Yarn

yarn add react-haiku

PNPM

pnpm install react-haiku

Usage Examples

Please check the official Documentation for full usage examples.

Using Hooks

import { useHover } from 'react-haiku';

const Component = () => {
  const { isHovered, ref } = useHover();

  return (
    <p ref={ref}>
      {isHovered ? 'All mice on me' : 'No mice on me'}
    </p>
  );
}

export default Component;

Using Utilities

import { For } from 'react-haiku';

const Component = () => {
    const list = [{ name: 'React' }, { name: 'Haiku' }]

    render(
        <>
            <For of={list} render={(item, index) =>
                <p>{item.name}</p>
            }/>
        </>
    )
}

export default Component;

PACKAGE CONTENTS

Hooks

• useHover() - Quick way to detect if your mouse is over an element!

Utilities

• For - Dynamic rendering component with automatic key assignment!

Maintainers

David Haz

License

MIT