named-effect v1.1.1

named-effect

Wrapper around React's useEffect, in-order to require a name for each effect used

Install

npm install named-effect --save

Usage

import useNamedEffect from 'named-effect'
...
const onLayoutThree = useNamedEffect([stateVariable], () => stateVariable === 3).bind(useEffect)

onVariableIsThree(() => {
  console.log(`variable is ${stateVariable}`); // variable is 3
})

Example

import React, { Component } from 'react'

import useNamedEffect from 'named-effect'

function Example() {

  const [currentLayout, setLayout] = useState(0);

  const onLayoutThree = useNamedEffect([currentLayout], () => currentLayout === 3).bind(useEffect);

  onLayoutThree(() => {
    console.log(`layout number ${currentLayout}`); // layout number 3
  })

  const onLayoutChangeClicked = () => {
    setLayout(prev => prev+1);
  }

  return (
    <div className="example">
      <div onClick={onLayoutChangeClicked}>Change layout</div>
    </div>
  );
}

License

MIT © shim2k