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

• Github: @githubhandle
• Twitter: @twitterhandle
• Linkedin: linkedin
• Web: Adebola

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is MIT licensed.