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.
demo.mp4
Download the package using your favorite package manager.
Yarn
yarn add animated-router-react
Npm
npm install animated-router-react
Here are some useful links:
- Getting started guide: WIP
- Example project: https://github.com/AmonDeShir/animated-router-react-example
- Documentation: WIP
- Routing
- Links
- Page arguments
- Animated transitions
- History api support
- Customisable 404 page
- Guardians
All contributions are welcomed.
- Fork and clone the repo to your local machine
git clone https://github.com/YOUR_GITHUB_USERNAME/animated-router-react.git
- 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
- If you've added a code that should be tested, ensure the test suite still passes.
yarn test
- Try to write some unit tests. Your goal is 100% coverage.
- Push your branch:
git push -u origin your-meaningful-branch-name
- Submit a pull request to the upstream animated-router-react repository.
- 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.
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
.
By contributing your code to the animated-router-react GitHub repository, you agree to license your contribution under the MIT license.