https://github.com/react-widgets/react_widgets-router

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.
https://github.com/react-widgets/react_widgets-router

keep-alive lightweight react-package react-router transition-animation

Last synced: about 1 month ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/react-widgets/react_widgets-router
• Owner: react-widgets
• License: mit
• Created: 2024-09-10T12:00:58.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-22T08:53:40.000Z (about 2 months ago)
• Last Synced: 2024-09-27T04:00:16.138Z (about 2 months ago)
• Topics: keep-alive, lightweight, react-package, react-router, transition-animation
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@web-package/react-widgets-router
• Size: 372 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
React Widgets Router

  

        

          

            Version

            v1.0.0-beta4

          

        

    

    You need to learn more about the react-widgets package!



# 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__


> The `keep-alive` feature 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](CHANGELOG.md) for details.

# Preview

The image below is a simple use gif of [Quark Icons](https://quarkicons.com/) and a website created using @web-package/react-widgets-router and @web-package/react-widgets.

![preview](https://github.com/user-attachments/assets/9d548362-05da-4b50-8288-ed410e2ffd33)

## Usage

This below codes are a simple example of the basic usage of this package.

> See Also, Instead of setting the `default` attribute to true, you can also set the path attribute to `*`.

```ts

return (

    

        

        

        } default={true} />

        Hello, World!>} />

    

)

```

### Without hooks and globally

```tsx

function ExamplePage1() {

    return (

         RouterBinding.instance.push("/exmaple-2")}>

            Go to /example-2

        

    )

}

```

### With hooks and locally

You need to keep that in mind about this feature is an experimental stage.

```tsx

function ExamplePage2() {

    const route = useRoute();

    return (

         route("/exmaple-1")}>

            Go to /example-1

        

    )

}

```

## 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