react-hanger

A collection of useful React hooks

Made by Kitze
kitze.io · X · YouTube

More projects by Kitze

pwn.watch Live security incidents: CVEs, patch status, fixed versions and advisories.	flavors.design Copy-pasteable design flavors. Pick a vibe, hand the markdown to your agent.	gifs.so Search, copy, and download reaction GIFs.
Shipper Changelog, roadmap, feature requests and tasks for every product you ship.	Kanso One keyboard-first app for your todos, habits, routines, planner and saved stuff.	HealthMaxx One health log for everything you track: by hand, from wearables, or through your AI.
Zero To Shipped A full-stack starter kit for web and mobile apps.	Sotto Voice-to-text for macOS. Local AI, one-time purchase.	Tinkerer Club A private community for builders, self-hosters, and AI tinkerers.
Sizzy The browser for web developers.	Supermac A macOS command center for everyday workflows.	DMX A focused desktop client for X.

Support this project

 

Sponsors

Matte 3D mockups and screen recordings with pro-level video editing	Postiz Agentic social scheduler for GIFs!	ScreenshotOne The best screenshot API for developers and agents
ether.fi a neobank with a built in ai-connector, build your own frontend to your finance with claude, chatgpt or your LLM of choice! Feedback always welcome!	OpenProse Reliable, event-driven multiagent workflows — in Markdown.	OpenTweet Agentic X (Twitter) autopilot.
AppSumo 1M+ entrepreneurs use AppSumo to find the best deals on software for their business. One-time payments, lifetime access.	Team Spartan by CONFLICT Know what matters. Get it fixed. Experience spans high-traffic consumer platforms, cloud infrastructure, and security — built under real operational pressure.	Browserless.io The web layer your agent runs on.
Strix Hack yourself before the bad guys do. Open source (70k+ stars on Github)	Maple VC We're 3 operators (digitalocean, uber, shopify) turned investors who write first checks into folks with ambition to build global businesses.	Rakazo Open source Grok Bot
The Influencer AI AI influencer generator: create a realistic influencer from traits or your photos, then make photos, talking videos and UGC ads with the same face every time.	Pluginboard Find the right plugins for your AI agents. Plugins, skills and step-by-step recipes for Claude, ChatGPT, Grokbot, Muse, Gemini and more.	file.cafe Free, instant file sharing.
LinkDR Link building that works: real backlinks from hundreds of high-DR sites, done for you or self-serve.	Outmano AI agents that watch your competitors so you don't have to	Mixpost Self-hosted social media scheduler. Pay once.
Your product here Reach developers in every kitze repo.

---

🙋‍♂️ Made by @thekitze

Other projects:

• 💻 Sizzy - A browser for designers and developers, focused on responsive design
• 🏫 React Academy - Interactive React and GraphQL workshops
• 🔮 Glink - Changelogs, Roadmap, User Requests
• 🐶 Benji - Ultimate wellness and productivity platform
• 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps
• 📹 YouTube Vlog - Follow my journey

react-hanger

Set of a helpful hooks, for different specific to some primitives types state changing helpers.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Andrey Los 🤔 🚇 ⚠️ 💻

Praneet Rohida 🚇 ⚠️ 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

---

Has two APIs:

• First and original from v1 is based on object destructuring e.g. const { value, toggle } = useBoolean(false) (Docs below)
• Second API (recommended why?) is based on more idiomatic to React hooks API, e.g. like useState with array destructuring const [value, actions] = useBoolean(false) (Docs)

Install

yarn add react-hanger

Usage

import React, { Component } from 'react';

import { useInput, useBoolean, useNumber, useArray, useOnMount, useOnUnmount } from 'react-hanger';

const App = () => {
  const newTodo = useInput('');
  const showCounter = useBoolean(true);
  const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
  const counter = useNumber(0);
  const todos = useArray(['hi there', 'sup', 'world']);

  const rotatingNumber = useNumber(0, {
    lowerLimit: 0,
    upperLimit: 4,
    loop: true,
  });

  return (
    <div>
      <button onClick={showCounter.toggle}> toggle counter </button>
      <button onClick={() => counter.increase()}> increase </button>
      {showCounter.value && <span> {counter.value} </span>}
      <button onClick={() => counter.decrease()}> decrease </button>
      <button onClick={todos.clear}> clear todos </button>
      <input type="text" value={newTodo.value} onChange={newTodo.onChange} />
    </div>
  );
};

Example

API reference (object destructuring)

How to import?

import { useBoolean } from 'react-hanger' // will import all of functions
import useBoolean from 'react-hanger/useBoolean' // will import only this function

useStateful

Just an alternative syntax to useState, because it doesn't need array destructuring. It returns an object with value and a setValue method.

const username = useStateful('test');

username.setValue('tom');
console.log(username.value);

useBoolean

const showCounter = useBoolean(true);

Methods:

• toggle
• setTrue
• setFalse

useNumber

const counter = useNumber(0);
const limitedNumber = useNumber(3, { upperLimit: 5, lowerLimit: 3 });
const rotatingNumber = useNumber(0, {
  upperLimit: 5,
  lowerLimit: 0,
  loop: true,
});

Methods:

Both increase and decrease take an optional amount argument which is 1 by default, and will override the step property if it's used in the options.

• increase(amount = 1)
• decrease(amount = 1 )

Options:

• lowerLimit
• upperLimit
• loop
• step - sets the increase/decrease amount of the number upfront, but it can still be overriden by number.increase(3) or number.decrease(5)

useInput

const newTodo = useInput('');

<input value={newTodo.value} onChange={newTodo.onChange} />

<input {...newTodo.eventBind} />
<Slider {...newTodo.valueBind} />

Methods:

• clear
• onChange
• eventBind - binds the value and onChange props to an input that has e.target.value
• valueBind - binds the value and onChange props to an input that's using only value in onChange (like most external components)

Properties:

• hasValue

useArray

const todos = useArray([]);

Methods:

• push - similar to native doesn't return length tho
• unshift - similar to native doesn't return length tho
• pop - similar to native doesn't return element tho
• shift - similar to native doesn't return element tho
• clear
• removeIndex
• removeById - if array consists of objects with some specific id that you pass all of them will be removed
• modifyById - if array consists of objects with some specific id that you pass these elements will be modified.
• move - moves item from position to position shifting other elements.

    So if input is [1, 2, 3, 4, 5]

    from  | to    | expected
    3     | 0     | [4, 1, 2, 3, 5]
    -1    | 0     | [5, 1, 2, 3, 4]
    1     | -2    | [1, 3, 4, 2, 5]
    -3    | -4    | [1, 3, 2, 4, 5]

useMap

const { value, set } = useMap([['key', 'value']]);
const { value: anotherValue, remove } = useMap(new Map([['key', 'value']]));

Actions:

• set
• delete
• clear
• initialize - applies tuples or map instances
• setValue

useSet

const set = useSet(new Set<number>([1, 2]));

useSetState

const { state, setState, resetState } = useSetState({ loading: false });
setState({ loading: true, data: [1, 2, 3] });
resetState();

Methods:

• setState(value) - will merge the value with the current state (like this.setState works in React)
• resetState() - will reset the current state to the value which you pass to the useSetState hook

Properties:

• state - the current state

usePrevious

Use it to get the previous value of a prop or a state value. It's from the official React Docs. It might come out of the box in the future.

const Counter = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return (
    <h1>
      Now: {count}, before: {prevCount}
    </h1>
  );
};

usePageLoad

const isPageLoaded = usePageLoad();

useScript

const { ready, error } = useScript({
  src: 'https://example.com/script.js',
  startLoading: true,
  delay: 100,
  onReady: () => {
    console.log('Ready');
  },
  onError: (error) => {
    console.log('Error loading script ', error);
  },
});

useDocumentReady

const isDocumentReady = useDocumentReady();

useGoogleAnalytics

useGoogleAnalytics({
  id: googleAnalyticsId,
  startLoading: true,
  delay: 500,
});

useWindowSize

const { width, height } = useWindowSize();

useDelay

const done = useDelay(1000);

usePersist

const tokenValue = usePersist('auth-token', 'value');

useToggleBodyClass

useToggleBodyClass(true, 'dark-mode');

useOnClick

useOnClick((event) => {
  console.log('Click event fired: ', event);
});

useOnClickOutside

// Pass ref to the element
const containerRef = useOnClickOutside(() => {
  console.log('Clicked outside container');
});

useFocus

// pass ref to the element
// call focusElement to focus the element
const [elementRef, focusElement] = useFocus();

useImage

const { imageVisible, bindToImage } = useImage(src, onLoad, onError);

Migration from v1 to v2

• Migration to array based API is a bit more complex but recommended (especially if you're using ESLint rules for hooks). Take a look at this section in array API docs.
• All lifecycle helpers are removed. Please replace useOnMount, useOnUnmount and useLifecycleHooks with useEffect. This:

useOnMount(() => console.log("I'm mounted!"));
useOnUnmount(() => console.log("I'm unmounted"));
// OR
useLifecycleHooks({
  onMount: () => console.log("I'm mounted!"),
  onUnmount: () => console.log("I'm unmounted!"),
});

to:

useEffect(() => {
  console.log("I'm mounted!");
  return () => console.log("I'm unmounted");
}, []);

• bind and bindToInput are got renamed to valueBind and eventBind respectively on useInput hook

---

More projects by Kitze

Apps & tools

Perkz Sell and manage access to private GitHub repositories.	JustWrite Distraction-free writing sprints for macOS, with time or word-count goals.	Releaseflow App updates and downloads.
Passlock A macOS password manager with time locks and unlock challenges.

Open source

Skillbox A self-hosted, versioned skills library for AI agents.	Unclutter Remove page clutter with AI-powered, reusable browser rules.	PageGrade Grade page clarity, writing, and on-page SEO.
Council Let your coding agents deliberate together before making a plan.	CodexMaxx Manage Codex accounts, usage, and active sessions on macOS.	React Hanger A collection of useful React hooks.
React Genie Animate React elements as they enter the viewport.	MobX Router A simple router for MobX and React apps.

All projects · GitHub · Follow on X · YouTube