react-direction

An npm package that allows you get the most up-to-date position when a user clicks on a previous/next/see more button within a predefined list.

Usage no npm install needed!

<script type="module">
  import reactDirection from 'https://cdn.skypack.dev/react-direction';
</script>

README

react-direction

This is a tiny custom React hook library that helps you keep track of where exactly a user is when navigating through a predefined number of pages.

For example when using Previous/Next buttons for navigation, you can keep track of what page number a user is and use that information to render components/items/elements.

This library is written in TypeScript and contains type definitions for your use.

See it on NPM

Getting Started

To get started, follow the instructions below

  • This package depends on the React library.
  • install the package npm install react-direction
  • import it in your app using:
import useDirection from "react-direction";
  • use it!
const [now, goBack, goForward] = useDirection(5);

return (
  <div>
    <p>{now}</p>
    <button onClick={() => goBack()}>Previous</button>
    <button onClick={() => goForward()}>Next</button>
  </div>
);
  • Where 5 represents the total number of Pages a user can move through.

Test

  • Clone this repo
  • Run npm link
  • In the React Application you wish to use this package in, run npm link react-direction. Import it as described above for usage and testing.

Authors

👤 Adebola Adeniran

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is MIT licensed.