Wondering what’s next for npm?Check out our public roadmap! »

use-lifecycle-hooks

1.0.2 • 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.

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

1

Version

1.0.2

License

MIT

Unpacked Size

14.6 kB

Total Files

7

Last publish

Collaborators

  • avatar