https://github.com/ilyalesik/react-use-trigger

React Hook for trigger effect from any place of code
https://github.com/ilyalesik/react-use-trigger

hook hooks react

Last synced: about 2 months ago
JSON representation

React Hook for trigger effect from any place of code

• Host: GitHub
• URL: https://github.com/ilyalesik/react-use-trigger
• Owner: ilyalesik
• License: mit
• Created: 2019-03-30T17:54:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T21:32:22.000Z (almost 2 years ago)
• Last Synced: 2024-10-20T14:32:36.404Z (about 2 months ago)
• Topics: hook, hooks, react
• Language: JavaScript
• Homepage:
• Size: 768 KB
• Stars: 26
• Watchers: 3
• Forks: 1
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-use-trigger`
• awesome-react-hooks-cn - `react-use-trigger`
• awesome-react-hooks - `react-use-trigger`
• awesome-react-hooks - `react-use-trigger`

README

        
# react-use-trigger

[![Build Status](https://travis-ci.org/ilyalesik/react-use-trigger.svg?branch=master)](https://travis-ci.org/ilyalesik/react-use-trigger)

[![npm version](https://img.shields.io/npm/v/react-use-trigger.svg)](https://www.npmjs.com/package/react-use-trigger)

React Hook for trigger effect from any place of code. It is an implementation a Pub-Sub strategy on React Hooks. 

* **Small** 305 bytes (minified and gzipped).

* Both **Flow** and **TS** types included.

```javascript

import createTrigger from "react-use-trigger";

import useTriggerEffect from "react-use-trigger/useTriggerEffect";

const fooTrigger = createTrigger();

export const Subscriber = () => {  

    useTriggerEffect(() => {

        // make some effect

    }, fooTrigger);

  

    return 
;

}


export const Sender = () => { 

    return  {

        fooTrigger() // call trigger

    }}>Send

}

```

Also, `useTrigger` may be used for combine with other inputs:

```javascript

export const Subscriber = (props) => {  

    const fooTriggerValue = useTrigger(fooTrigger);

    const [someState, setSomeState] = useState();

    

    useEffect(() => {

        // make some effect

    }, [fooTriggerValue, props.someProp, someState]);

  

    return 
;

}

```




  



## Installation

Install it with yarn:

```

yarn add react-use-trigger

```

Or with npm:

```

npm i react-use-trigger --save

``` 

## API

#### `createTrigger(): TriggerWrapper;`

Create a trigger.

`TriggerWrapper` is function, that update value of trigger. 

#### `useTrigger(triggerWrapper: TriggerWrapper): string;`

Returns current value of trigger. A string, generated by [nanoid](https://github.com/ai/nanoid).

Can be used for combine trigger with other inputs:

```javascript

import useTrigger from "react-use-trigger/useTrigger";

export const Subscriber = (props) => {  

    const fooTriggerValue = useTrigger(fooTrigger);

    const [someState, setSomeState] = useState();

    

    useEffect(() => {

        // make some effect

    }, [fooTriggerValue, props.someProp, someState]);

  

    return 
;

}

```


#### `useTriggerEffect(create: () => MaybeCleanUpFn, triggerWrapper: TriggerWrapper): void;`

Call effect (from `create`) for every change of trigger.