❤Nearly Past Midnight

    use-lifecycle-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    use-lifecycle-hooks


    All Contributors Build Status    Coverage Status    NPM version    License    Top Language    Code Size    Code of Conduct PRs Welcome   

    Use a class-based lifecycle ⚡ under the React Hooks ⚛️🚀 ..

    Thinking in lifecycles terms in hooks is a bad practice.
    You can follow this article for a useEffect guide and how it's bad to mix think.

    Prerequisites ⚠️:

    In order to use this library, a React version >=16.8.0 is required which introduce React Hooks ⚛️⚡ ..

    Installation

    # npm ..
    $ npm install use-lifecycle-hooks
    # yarn ..
    $ yarn add use-lifecycle-hooks

    API

    Every lifecycle hook can be used more than one time in the same function, observing the hook rules📏.

    Args

    Argument Type Descriptio Note
    funcs Function callback function only allowed to return void. ******
    deps Array all props/states values that change them lead to re-rendering. only in useShuseShouldComponentUpdate.

    Undecomented Hooks/HOC

    • [useShouldComponentUpdate][use-should-component-update-docs-url] — same with shouldComponentUpdate (and componentDidUpdate with comparison).
    • usePureComponent — same as useShouldComponentUpdate.
    • withShouldComponentUpdate — same as useShouldComponentUpdate but follow the hoc pattern.

    Usage

    This is a practical example of how to use. For more, you can review the docs dir.

    import React from 'react';
    import { useComponentDidMount } from 'use-lifecycle-hooks';
    
    function yourComponent() {
      // <yourComponent />
      // State ..
      const [state, setState] = React.useState(' Hello World !');
    
      // ComponentDidMount ..
      useComponentDidMount(() => {
        setState(ComponentDidMountMsg);
      });
    
      return <h1>{state}</h1>;
    }

    You can play around with it on this sandbox codesandbox.io/use-lifecycle-hooks .. or clone the repo and play around with the all examples in the examples folder 👻.

    License


    MIT

    Install

    npm i use-lifecycle-hooks

    DownloadsWeekly Downloads

    56

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    17 kB

    Total Files

    9

    Last publish

    Collaborators

    • 3imed-jaberi