https://github.com/tyrealhu/react-tapable
A variety of react subscription and distribution module
https://github.com/tyrealhu/react-tapable
eventbus events hook hooks hooks-api javascript react react-components react-native reactjs tapable typescript
Last synced: 13 days ago
JSON representation
A variety of react subscription and distribution module
- Host: GitHub
- URL: https://github.com/tyrealhu/react-tapable
- Owner: TyrealHu
- Created: 2022-07-14T14:44:43.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-31T14:19:04.000Z (over 2 years ago)
- Last Synced: 2025-05-28T14:44:36.964Z (30 days ago)
- Topics: eventbus, events, hook, hooks, hooks-api, javascript, react, react-components, react-native, reactjs, tapable, typescript
- Language: TypeScript
- Homepage:
- Size: 717 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-tapable [](https://www.npmjs.com/package/react-tapable)[](https://github.com/TyrealHu/react-tapable/actions/workflows/nodejs.yml)[](https://codecov.io/gh/TyrealHu/react-tapable)
Module of React subscription and Distribution based on [tapable](https://github.com/webpack/tapable)
We have added two specific hooks to solve different situations, as detailed in [here](./doc/HOOKS.CN.md)
## Quick Start
You can use this module in the following ways
```typescript
import createTapableController, {SyncHook} from 'react-tapable'
const {
HooksNameMap,
tapHook,
call,
callAsync,
promise,
useTapable,
removeTapHook
} = createTapableController<{ testOne: string; testTwo: string }>(
'Test',
{
testOne: new SyncHook([]),
testTwo: new SyncHook([])
}
)
```
### React Hooks + useTapable
You can subscribe by directly using `useTapable` in the React Functional Component .
You can use `state` in `fn of useTapable`, and the registered function will automatically uninstall and re-listen according to the changes in the incoming `state`, without worrying about memory leaks.
```tsx
// import this function from the file where you called createTapableController
import {useTapable, HooksNameMap} from './tapable'
import * as React from 'react'
import {useState} from 'react'
const Component = () => {
const [count, setCount] = useState(1)
useTapable(
{
hook: HooksNameMap.XXX,
mode: 'tap'
},
() => {
console.log(count)
},
[count]
)
return (
Hello React Tapable)
}
```
### React Component + tapHook + removeTapHook
You can subscribe by directly using `tapHook` in the React Component.
You can use `state` in `fn of tapHook` to registering function , and uninstall the function by `removeTapHook`.
```tsx
// import this function from the file where you called createTapableController
import {tapHook, removeTapHook, HooksNameMap} from './tapable'
import * as React from 'react'
export class Component extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 1
}
this.fn = () => {
console.log(this.state.count)
}
tapHook({
hook: HooksNameMap.XXX,
mode: 'tap'
}, this.fn)
}
componentWillUnMount() {
removeTapHook(HooksNameMap.XXX, 'tap', this.fn)
}
}
```
## Method introduction
### `HooksNameMap`
This map stores the names of all the hooks you have registered, and it can be used when you register the event
```tsx
createTapableController<{ testOne: string; testTwo: string }>(
'Test',
{
testOne: new SyncHook([]),
testTwo: new SyncHook([])
}
)
```
For example, in the case of the above, it will be `{testOne: 'testOne', testTwo: 'testTwo'}`
### `call | callAsync | promise`
These three methods are used to trigger listening events.
### `tapHook | removeTapHook`
These two methods are used to register events and uninstall events in React.Component
### `useTapable`
This method is used to register events in react hooks