Skip to content

Latest commit

 

History

History
336 lines (254 loc) · 7.66 KB

README.md

File metadata and controls

336 lines (254 loc) · 7.66 KB

react hookedup

npm GitHub license Storybook

Hooks require at least React 16.8

Installation

using npm

npm install react-hookedup --save

using yarn

yarn add react-hookedup

Demo

Visit here

hooks

common hooks

Name Description Arguments Returns
useArray useful hook for manipulating arrays initial value {value, setValue, removeById, removeIndex, clear}
useBoolean useful hook for manipulating booleans initial value {value, setValue, toggle, setTrue, setFalse}
useCounter counter hook value,{upperLimit,lowerLimit,step,loop} {value, setValue, increase,decrease}
useFocus focus hook null {focused, bind}
useHover hover hook null {hovered, bind}
useInput input handling hook initial value {value, setValue, onChange, bindToInput, bind, hasValue, clear}

lifecycles hooks

Name Description Arguments Returns
useLifecycleHooks use lifecycle methods {onMount, onUnmount} void
useOnMount componentDidMount like lifecycle Function void
useOnUnmount componentWillUnmount like lifecycle Function void
useMergeState merge the previous state with new one initial value of the state {setState: Function, state}
usePrevious get the previous value of the state initial value of the state the previous value

timers hooks

Name Description Arguments Returns
useInterval use setInterval via hooks {function, delay} void
useTimeout use setTimeout via hooks {function, delay} void

network hooks

Name Description Arguments Returns
useOnLineStatus check if the browser is connected to the internet null {online}

Usage

useArray

import { useArray } from 'react-hookedup';

const ExampleUseArray = () => {
  const {
    add,
    clear,
    removeIndex,
    value: currentArray
  } = useArray(['cat','dog','bird']);

  const {
    bindToInput,
    value
  } = useInput('');

  const {
    bindToInput: bindToInput2,
    value: value2
  } = useInput('');

  return(
    <div>
      <p>
        current array is : {JSON.stringify(currentArray)}
      </p>
      <div>
        add element :
        <input {...bindToInput}  />
        <button onClick={() => add(value)}>add</button>
      </div>
      <div>
        remove element by index :
        <input {...bindToInput2}  />
        <button onClick={() => removeIndex(value2)}>delete</button>
      </div>
      <div>
        delete all items :
        <button onClick={() => clear()}>clear</button>
      </div>
    </div>
  )
};

useBoolean

import { useBoolean } from 'react-hookedup';

const ExampleUseBoolean = () => {
  const {toggle, value} = useBoolean(false);

  return(
    <div>
      <p>{JSON.stringify(value)}</p>
      <button onClick={() => toggle()}>toggle</button>
    </div>
  );
};

Methods:

  • toggle
  • setTrue
  • setFalse

useOnMount

import { useOnMount } from 'react-hookedup';

const App = () => {
  useOnMount(() => console.log("hello world"));
  return <div> hello world </div>;
};

useOnUnmount

const App = () => {
  useOnUnmount(() => console.log("goodbye world"));
  return <div> goodbye world </div>;
};

useLifecycleHooks

const App = () => {
  useLifecycleHooks({
    onMount: () => console.log("mounted!"),
    onUnmount: () => console.log("unmounting!")
  });

  return <div> hello world </div>;
};

useCounter

const counter = useCounter(0);
const limitedNumber = useCounter(3, { upperLimit: 5, lowerLimit: 3 });
const rotatingNumber = useCounter(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.bindToInput} />
<Slider {...newTodo.bind} />

Methods:

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

Properties:

  • hasValue

useFocus

const ExampleUseFocus = () => {
  const {focused, bind} = useFocus();

  return(
    <div>
      <p>this is input is : {focused ? 'focused' : 'not focused'}</p>
      <input {...bind}  />
    </div>
  );
};

useHover

const ExampleUseHover = () => {
  const {hovered, bind} = useHover();

  return(
    <div>
      <p>this is input is : {hovered ? 'hovered' : 'not hovered'}</p>
      <input {...bind}  />
    </div>
  );
};

useArray

const todos = useArray([]);

Methods:

  • add
  • clear
  • removeIndex
  • removeById

useMergeState

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

Methods:

  • setState(value) - will merge the value with the current state (like this.setState works in React)

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>
  );
};

useInterval

const useIntervalExample = () => {
  useInterval(() => alert('hello world'), 1500);

  return (
    <h1>
      I will alert in 1.5 s
    </h1>
  );
};

useTimeout

const useTimeoutExample = () => {
  useTimeout(() => alert('hello world'), 1500);

  return (
    <h1>
      I will alert in 1.5 s
    </h1>
  );
};

useOnLineStatus

const useOnLineStatusExample = () => {
  const {online} = useOnLineStatus();

  return (
    <h1>
      you are : {online ? 'online' : 'offline'}
    </h1>
  );
};