Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC.

Installation

using npm

npm install react-hookedup react@next react-dom@next --save

using yarn

yarn add react-hookedup react@next react-dom@next

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