Introduction
This package is a router that provides transition animations and fully preserves the state of previous elements, offering an experience close to a Web standard API.
See Also
Thekeep-alivefeature is enabled by default and documented, but the options for keep-alive have not yet been made configurable or customizable. See Also, If you want the change-log by version for this package. refer to Change Log for details.
Preview
The image below is a simple use gif of Quark Icons and a website created using @web-package/react-widgets-router and @web-package/react-widgets.
Usage
This below codes are a simple example of the basic usage of this package.
See Also, Instead of setting the
defaultattribute to true, you can also set the path attribute to*.
return (
Hello, World!} />
)
Without hooks and globally
function ExamplePage1() {
return (
)
}
With hooks and locally
You need to keep that in mind about this feature is an experimental stage.
function ExamplePage2() {
const route = useRoute();
return (
)
}
The Properties of CSS
| Name | Description | Default |
|---|---|---|
| --router-fadein-keyframe | This variable is animation name of a fade-in transition keyframe for this router. | None |
| --router-fadein-duration | This variable is animation duration of a fade-in transition for this router. | 0.3s |
| --router-fadeout-keyframe | This variable is animation name of a fade-out transition keyframe for this router. | None |
| --router-fadeout-duration | This variable is animation duration of a fade-out transition for this router. | 0.3s |