Comments (5)
I think we could do something like usePagination
, but currently the API seems to be quite verbose to me. Maybe it makes sense to first start with a "simpler" cursor based pagination, where you receive an opaque cursor from the server to be used in next request.
const ListComponent = () => {
const [list, loadMore] = useCursorPagination(
(cursor) => `http://my-site.com/list.php?cursor=${cursor}`,
(response) => [response.body.list, response.body.cursor],
);
return (
<>
{list.map(({item, key}) => <Item {..item} key={key} />)}
</>
);
};
from react-use.
In modern web app,We use rest-api for our data,I think cursor is a better description, but if i compose cursor and response in usePagination is not uneconomic. Most of us don't need your api in this component.What we should do is only show the Pagination UI.like this
,
#210 (comment)
This is just for pagination. Not for server data.
from react-use.
@SnowFlowers I'm not in favor of adding UI components to this library as this is a hooks library. The hook should expose state and callbacks that can be used with any UI components.
I think @streamich's example should maybe be called useAsyncMore
and have an API that's similar to the useAsync
hook. @cloudever's hook could be simplified to something like this:
const {nextPage, prevPage, goToPage} = usePagination(initialPage);
This is so simple and similar to useCounter
that I'm not really sure if it's worth adding a custom hook to the library for this.
from react-use.
@wardoost OK, I see. Maybe it's not a good part for this repo.
from react-use.
This is so simple and similar to
useCounter
that I'm not really sure if it's worth adding a custom hook to the library for this.
The first thing I did when I found this repo was ctrl+f -> usePaginat...
. It could be just an alias. I would say that name aliasing is a pretty common approach to make the API more developer friendly. How many new users will figure out that they can do pagination with useCounter
?
Anyone can do the aliasing on their own, but they could also implement their own useCounter
hook. It's all simple, but it's nice to have a little bit less work to do.
from react-use.
Related Issues (20)
- What's the meaning of useSlider's prop 'styles' with the type CSSProperties
- Request: replace keyboardjs dependency with keystrokes (updated lib) HOT 1
- `useLocalStorage` not working with updater function HOT 1
- useVideo.story.tsx - sampleVideo can not be loaded HOT 3
- How to make clicking some elements an exception for useClickAway hook
- Add a reset history method to useStateWithHistory
- Install hooks seperate from each other HOT 2
- UseKeyPressEvent doesn't work when non-english language is set HOT 1
- useMeasure dimensions out of sync in react18 HOT 2
- Please add a list of valid keys to https://github.com/streamich/react-use/blob/master/docs/useKey.md
- useMedia deprecated methods HOT 1
- There is deprecated dependency in your nano-css HOT 1
- useWindowSize does not work on App Router (nextjs) HOT 1
- useCopyToClipboard: accept options object to pass to copy-to-clipboard HOT 2
- useCopyToClipboard: accept options object to pass to copy-to-clipboard
- [question]: How can I combine useMeasure with useHoverDirty HOT 1
- useLocalStorage doesn't not remove key on setValue(undefined) HOT 1
- useLocalStorage documentation: warn against calling with same key in multiple components HOT 1
- useLocalStorage without 'or undefined' HOT 2
- Breaking rules of hooks leads to incorrect behaviour in useLocalStorage
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-use.