https://github.com/paratron/hook-creator
Create react data hooks for async operations and even push data
https://github.com/paratron/hook-creator
Last synced: 4 months ago
JSON representation
Create react data hooks for async operations and even push data
- Host: GitHub
- URL: https://github.com/paratron/hook-creator
- Owner: Paratron
- Created: 2020-02-23T11:20:38.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-23T22:13:55.000Z (almost 6 years ago)
- Last Synced: 2024-10-19T01:18:37.765Z (about 1 year ago)
- Language: JavaScript
- Size: 30.3 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hook Creator
This module helps creating react hooks for your application. The hooks can return any type of data and
can work with any type of arguments. The module helps you in processing and updating the return values
of your hooks.
### Example usage
```jsx harmony
import {createHook} from 'hook-creator';
/**
* The first argument needs to be the name of the hook - this is for debugging reasons.
* The second argument is a curried function. The outer function body receives an update function
* directly passed from the hook creator module. The second function is your actual hook function.
* It has all arguments you want to actually pass in your react components.
*/
const [useUsername] = createHook('useUsername', (updateHook) => (userId) => {
// This is the fetch function. It computes the data, the hook should return.
switch(userId){
case 'a':
return 'Peter Pan';
case 'b':
return 'Captain Hook';
case 'c':
return 'Mr. Smee'
}
});
```
And here is a component that implements the hook:
```jsx harmony
const UserLabel = ({id}) => {
const username = useUsername(id);
return
The username is: {username};
};
```
Now, an app could use the component like this:
```jsx harmony
const App = () => {
}
```
Which results in this output:
```html
The username is: Peter Pan;
The username is: Captain Hook;
The username is: Mr. Smee;
```
### Actual real world usage
The above example is simple, but pointless. The real power of this module is
the ability to to trigger component updates, when the return data of the hook changes.
Lets re-create the above username hook but this time, we fetch the user name from
an API:
```jsx harmony
let cache = {};
const [useUsername] = createHook('useUsername', (updateHook) => (id) => {
// This is because we just want to trigger _one_ network request for each user id.
if(cache[id]){
return cache[id];
}
cache[id] = [null, {loading: true}];
fetch(`/users/${id}`).then(result => {
cache[id] = [result.username, {loading: false}];
// Update all hooks, that use this id.
updateHook((currentId) => currentId === id);
});
return cache[id];
});
```
This time, the hook will return two values. First, the username and second an status
object that tells the using component if the username has already been loaded, or not.
If the first call to the hook happens, creates a new cache object and triggers a GET request
to the API. As soon as the request is being answered, the new values is written to the cache
and an update for the hook is requested. The filter function makes sure that only hooks
with the current player id are being updated.