react-hookedup

    0.1.2 • Public • Published

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

    Install

    npm i react-hookedup

    DownloadsWeekly Downloads

    3,361

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    2.79 MB

    Total Files

    45

    Last publish

    Collaborators

    • zakariaharti