react-haiku

React Hook & Utility Library

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-haiku
16312.0.32 months ago4 months agoMinified + gzip package size for react-haiku in KB

Readme

React Haiku
<br>
<br>
<img src="./media/haiku.svg" alt="react-haiku" height="200">
<br>
<br>
<b>An awesome collection of React Hooks & Utilities!</b>
<br>
<br>
<br>
<br>
<hr>

NPM npm npm

Links

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 { hovered, ref } = useHover();

  return (
    <p ref={ref}>
      {hovered ? '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 each={list} render={(item, index) =>
		        <p>{item.name}</p>
	        }/>
        </>
    )
}

export default Component;

PACKAGE CONTENTS

Hooks

  • useClipboard() - Copy data to the user's clipboard!
  • useHover() - Quick way to detect if your mouse is over an element!
  • useInputValue() - Manage input state with this simple hook!
  • useLeaveDetection() - Detect when your user's cursor leaves the page!
  • useMediaQuery() - Manipulate your component using media queries!
  • useMousePosition() - Detect the current position of the mouse relative to a target or the whole document!
  • usePrefersTheme() - Detect the user's preferred system theme!
  • useScript() - Attach script tags to the document from your components!
  • useToggle() - Toggle state values between two different options!
  • useBoolToggle() - Toggle boolean state values!
  • useUrgentUpdate() - Force render a component when calling this hook!
  • useClickOutside() - Detect clicks outside a target element!
  • useConfirmExit() - Prompt the user with a message before closing the tab if the state is set as dirty.
  • useDebounce() - Debounce state changes to react to updates after a delay!
  • useEventListener() - Set event listeners on the window object or a specific target element!
  • useFavicon() - Dynamically update the website's favicon from a component!
  • useFirstRender() - Check whether or not a component is on its first render!
  • useHold() - Handle long presses on a target element and execute a handler after a set delay!
  • useIdle() - Detect user activity/inactivity on the page based on events!
  • useIsomorphicLayoutEffect() - Switch between useEffect and useLayoutEffect depending on the execution environment (SSR VS Browser)!
  • useLocalStorage() - Manage localStorage values dynamically
  • useScrollPosition() - Access the current scroll position on the page and modify it programatically.
  • useSingleEffect() - Run the useEffect hook strictly only once when the component is mounted!
  • useTitle() - Update the document's title from your components!
  • useUpdateEffect() - Similar to useEffect, but it skips the first render of a component, and only react to updates triggered by dependency values.

Utilities

  • If - Component for simple conditional rendering!
  • Show - Component for complex conditional rendering!
  • For - Dynamic rendering component with automatic key assignment!
  • RenderAfter - Component that renders its children after a set delay.

Maintainers

David Haz

License

MIT