Need help with react-hanger?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kitze
1.7K Stars 64 Forks MIT License 148 Commits 2 Opened issues

Description

A collection of useful React hooks

Services available

!
?

Need anything else?

Contributors list

# 147,610
React
bubble
npm-scr...
npm
43 commits
# 22,289
React
GraphQL
Scala
dao
31 commits
# 125,446
JavaScr...
redux-s...
Redux
React N...
14 commits
# 73,030
React
CSS
Storybo...
js
2 commits
# 120,286
ecmascr...
Babel
install...
gatsby
2 commits
# 6,504
React
TypeScr...
angular...
Git
1 commit
# 505,201
CSS
TypeScr...
1 commit
# 234,597
regl
C
openfra...
OpenCV
1 commit
# 478,621
JavaScr...
TypeScr...
1 commit
# 157,191
HTML
React
Twitch
dailymo...
1 commit
# 113,107
C
generic
CSS
Nest
1 commit
# 557,940
JavaScr...
TypeScr...
1 commit
# 195,120
faceboo...
Electro...
macos-a...
messeng...
1 commit
# 559,426
TypeScr...
JavaScr...
1 commit
# 482,699
HTML
CSS
event-l...
mojolic...
1 commit
# 73,211
Emacs
zsh-pro...
zsh-the...
fish-sh...
1 commit

react-hanger

npm version <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> All Contributors <!-- ALL-CONTRIBUTORS-BADGE:END -->

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!

Check out:

  • 💻 Sizzy - The Browser For Developers
  • 🔮 Fungarzione - Keep your users in the loop (Changelogs, Roadmap, Issues)
  • 💌 Twizzle - A standalone app for Twitter DM

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 (

toggle counter counter.increase()}> increase {showCounter.value && {counter.value} } counter.decrease()}> decrease clear todos
); };

Example

Edit react-hanger 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('');

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([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 (
    

Now: {count}, before: {prevCount}

); };

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.