https://github.com/askbeka/react-hooker-gene
React components using generator functions*, using new Hooks API
https://github.com/askbeka/react-hooker-gene
Last synced: 11 days ago
JSON representation
React components using generator functions*, using new Hooks API
- Host: GitHub
- URL: https://github.com/askbeka/react-hooker-gene
- Owner: askbeka
- License: mit
- Created: 2018-11-15T01:45:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T02:59:19.000Z (over 7 years ago)
- Last Synced: 2025-12-19T10:31:32.236Z (6 months ago)
- Language: TypeScript
- Size: 101 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
README
# React hooker generator
```bash
npm install react-hooker-gene
```
### Importing library
You can import the generated bundle to use the whole library generated by this starter:
```javascript
import wrapper, { useState, useEffect } from 'react-hooker-gene'
```
Additionally, you can import the transpiled modules from `dist/lib` in case you have a modular library:
```javascript
import wrapper, { useState, useEffect } from 'react-hooker-gene/dist/lib/react-hooker-gene'
```
### Motivation
React Hooks API allows us to use functions for impure components, but it is hard to test those functions in isolation, and the order of execution of hooks too, since it is important in order for React to function well.
### Example usage
#### Simple
```javascript
export const Component = wrapper(function* () {
const [state, useState] = yield useState();
return (
{state}
);
});
```
seems like javascript
#### With custom hook using generator
```javascript
function* useGithubUsers() {
const [query, setQuery] = yield useState("");
const [results, setResults] = yield useState([]);
const [loading, setLoading] = yield useState(false);
// each rerender
yield useEffect(debounce(() => {
if (query !== "") {
setLoading(true);
fetch(`https://api.github.com/search/users?q=${query}`, { method: "GET"}).then(req => {
return req.json();
}).then(data => {
setLoading(false)
setResults(data.items)
})
}
}, 300), [query]);
return {
query,
setQuery,
setLoading,
results,
loading,
};
}
export const App = genWrapper(function* () {
const { setQuery, query, results, loading } = yield* useGithubUsers();
return (
setQuery(e.target.value)} />
{loading && - Loading
}
{
results && results.map((item, index) => - {item.login}
)
}
);
});
```
#### Wrap existing hooks
```javascript
import { makeHook, useState } from 'react-hooker-gene';
import someCustomHook from 'some-custom-hook';
const validCustomHook = (...args) => makeHook(someCustomHook, args)
export const Component = wrapper(function* () {
const [state, useState] = yield useState();
yield validCustomHook(/* does something */);
return (
{state}
);
});
```
## Resources
- [function*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)