Package Exports

effect-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (effect-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

effect-component

Effect component is a port of the React.useEffect hook into render props. Available for the people who don't want/can't migrate into hooks right away.

How does it works?

On the hook, you'll normaly write it as follows:

import React, { useEffect } from 'react'

const MyComponent = ({ counter }) => {
  useEffect(() => alert(`counter is now ${counter}`), [counter])

  return <div>Counter is {counter}</div>
}

With this package:

import React from 'react'
import EffectComponent from 'effect-component'

const MyComponent = ({ counter }) => {

  return <EffectComponent
    effect={() => alert(`counter is now ${counter}`)}
    checkValues={[counter]}
  >
    <div>Counter is {counter}</div>
  </EffectComponent>
}

API:

checkValues: it works exactly as the 2nd parameter of React.useEffect. Leaving it unset will call effect on every render. Setting it into [] will only call it on mount, and setting a value will only call it when the value changes.
effect: You pass the function to act here, it can also return a cleanup function if is needed.
children: Optional children to render, if is needed