7.0.2 • Published 8 months ago
react-wrap-request v7.0.2
react-wrap-request
A react-hook implementation for the wrap-request.
basic usage
function Component() {
const { $: items } = useWrapRequest(() => fetch(`https://.../`), {
defaultData: [],
deps: [], // fetch will happen when component did mount
});
return <div>{items.map((item) => item.id)}</div>;
}
working with deps
function Component(props) {
const { $: items } = useWrapRequest((id) => fetch(`https://.../${id}`), {
defaultData: [],
deps: [props.id], // whenever props.id update, wrapRequest will re-fetch
});
return <div>{items.map((item) => item.id)}</div>;
}
manual request
function Component(props) {
const wrapRequest = useWrapRequest((id) => fetch(`https://.../${id}`), {
defaultData: [],
});
useEffect(() => {
wrapRequest.request([100]);
}, []);
return <div>{wrapRequest.items.map((item) => item.id)}</div>;
}
transform request
see https://github.com/misantronic/wrap-request#pipe
function Component() {
const items = useWrapRequest(() => fetch(`https://.../`), {
defaultData: [],
deps: [],
}).pipe((items) => items.map((item) => ({ id: item.id })));
console.log('source', items.source);
console.log('transformed result', items.$);
return <div>{items.$.map((item) => item.id)}</div>;
}
pattern matching
function Component(props) {
const wrapRequest = useWrapRequest((id) => fetch(`https://.../${id}`), {
defaultData: [],
deps: [props.id],
});
return wrapRequest.match({
loading: () => <div>Loading</div>,
error: () => <div>Error</div>,
empty: () => <div>No items.</div>,
fetched: (items) => <div>{items.map((item) => item.id)}</div>,
});
}
7.0.2
8 months ago
7.0.0
1 year ago
7.0.1
1 year ago
5.0.1
2 years ago
5.0.0
2 years ago
3.1.3
2 years ago
3.1.2
2 years ago
3.1.1
2 years ago
3.1.0
2 years ago
3.0.1
2 years ago
3.1.4
2 years ago
3.0.0
2 years ago
4.1.0
2 years ago
4.0.1
2 years ago
4.0.0
2 years ago
4.1.2
2 years ago
4.1.1
2 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago