Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Akbar1909/expoplatform-hooks
https://github.com/Akbar1909/expoplatform-hooks
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/Akbar1909/expoplatform-hooks
- Owner: Akbar1909
- Created: 2022-11-11T19:14:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-13T03:30:17.000Z (about 2 years ago)
- Last Synced: 2024-08-13T07:17:06.755Z (4 months ago)
- Language: TypeScript
- Size: 23.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - Akbar1909/expoplatform-hooks - (TypeScript)
README
# @expoplatformportal/hooks
The simple react custom hooks are aimed to make the building process is esier and more understandable :)
## Acknowledgements
- [usePagination](#user-content--usepagination)
- [useDebounce](#user-content--usedebounce)
- [useInput](#user-content--useinput)
- [useInterval](#user-content--useinterval)
- [useAbortController](#user-content--useabortcontroller)
## Installation
Install the package with npm, yarn
```bash
npm install @expoplatformportal/hooks
yarn add @expoplatformportal/hooks
```
## Running Tests
To run tests, run the following command
```bash
npm run test
```
## Usage/Examples
####
```javascript
import { usePagination } from '@expoplatformportal/hooks'
const filters={order:'asc'};
const newState={
page:1,
limit:4,
...
}
function App() {
const { list, page, limit, total, filters, isFetching, updateAnyFields,setPage, setTotal, setLimit, setIsFetching, setList } = usePagination(filters, newState);
/**
in order to change some property we can use updateAnyFields function
- update isFetching - updateAnyFields({isFetching:true})
- update page - updateAnyFields({page:3})
- update limit - updateAnyFields({limit:10})
- update list - updateAnyFields({list:newList})
- update total - updateAnyFields({total:100})
- update filters -updateAnyFields({filters:newFilters})
or
usePagination returns util functions for every single property to update
- isFetching- setIsFetching(true)
- page - setPage(3)
- limit - setLimit(10)
- list - setList(newList)
- total - setTotal(100)
- filters - addNewFilter(newFilters)
*/
return
}
```
| Parameter | Type | Description |
| :------------- | :--------------------------------------------------------------- | :-------------------------------------------- |
| `filter` | `{order:'asc', search:'', ...}` | **Optional** |
| `initialState` | `{list:{},page:1,limit:4, total:0, filters:{},isFetching:false}` | **Optional** |
```javascript
function App() {
const [search, setSearch] = useState('')
const debouncedValue = useDebounce(search, 2000)
const onHandleChange = (e) => {
setSearch(e.target.value)
}
return
}
```
| Parameter | Type | Description |
| :-------- | :------- | :---------------------------------------------------------------------------------------------------------- |
| `search` | `string` | **Required** |
| `time` | `number` | **Optional** the delay time, _default_: 1s |
```javascript
function App() {
const { value, onChange, setValue } = useInput('')
return
}
```
| Parameter | Type | Description |
| :------------- | :------- | :------------------------------------------------------------------------------------------------------------------------- |
| `initialValue` | `string` | **Required** this is used as a initial value. _default_: '' |
```javascript
function App() {
const [counter, setCounter] = useState(0)
useInterval(() => {
setCounter(counter - 1)
}, 1000)
return
{counter}
}
```
| Parameter | Type | Description |
| :--------- | :--------- | :----------------------------------------------------------------------------------------- |
| `callback` | `function` | **Required** |
| `delay` | `number` | **Optional** _default_:1s |
In default case, when the component is unmount, the endpoint will be aborted. If we don't want the endpoint to abort in unmount, we need to pass **isAbortonUnMount=false**: useAbortController(false)
```javascript
function App() {
const { signal, abort, regenerateController } = useAbortController();
useEffect(()=>{
fetch(endpointUrl, signal)
},[]);
return
}
```
- If we want to abort with any kind of events, we can use abort function
```javascript
function App() {
const { signal, abort, regenerateController } = useAbortController()
useEffect(() => {
fetch(endpointUrl, signal)
}, [])
return (
<>
Cancel Request
>
)
}
```
| Parameter | Type | Description |
| :----------------- | :-------- | :-------------------------------------------------------------------------------------------- |
| `isAbortonUnMount` | `boolean` | **Optional** _default_: true |