Animated Router

Icon made by smalllikeart from www.flaticon.com.

Animated Router is a routing library for React. With it doing page transitions stop being such an inconvenience. Animated Router is simple to use and flexible. Your transitions are just a JavaScript function that gives you a reference to your page (forward ref react component) as an argument. So to create your animations, you can use whatever you want, for example, a powerful library like GSAP, CSS transitions or animations, or just a pure javascript.

https://user-images.githubusercontent.com/13831258/138578047-970df057-8df0-426e-8e8c-64e5912c855f.mp4

Installation

Download the package using your favorite package manager.

Yarn

yarn add animated-router-react

Npm

npm install animated-router-react

Links

Here are some useful links:

• Getting started guide: WIP
• Example project: https://github.com/AmonDeShir/animated-router-react-example
• Documentation: WIP

Features

• Routing
• Links
• Page arguments
• Animated transitions
• History api support
• Customisable 404 page
• Guardians

Contributions

All contributions are welcomed.

1. Fork and clone the repo to your local machine git clone https://github.com/YOUR_GITHUB_USERNAME/animated-router-react.git
2. Create a new branch from main with a meaningful name for a new feature or an issue you want to work on: git checkout -b your-meaningful-branch-name
3. If you've added a code that should be tested, ensure the test suite still passes. yarn test
4. Try to write some unit tests. Your goal is 100% coverage.
5. Push your branch: git push -u origin your-meaningful-branch-name
6. Submit a pull request to the upstream animated-router-react repository.
7. Choose a descriptive title and describe your changes briefly.

In case you have any questions about a feature you want to develop of something you're not sure how to do, you can still create a draft pull request to discuss the implementation details.

Coding style

Please follow the coding style of the project. Animated Router uses eslint and prettier. If possible, enable their respective plugins in your editor to get real-time feedback. The linting can be run manually with the following command: yarn lint.

License

By contributing your code to the animated-router-react GitHub repository, you agree to license your contribution under the MIT license.