https://github.com/skt-t1-byungi/react-router-refreshable

Supports refresh (remount) on react-router-dom
https://github.com/skt-t1-byungi/react-router-refreshable

react react-router

Last synced: 3 months ago
JSON representation

Supports refresh (remount) on react-router-dom

• Host: GitHub
• URL: https://github.com/skt-t1-byungi/react-router-refreshable
• Owner: skt-t1-byungi
• License: mit
• Created: 2021-07-27T14:57:27.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-11-28T10:02:56.000Z (over 3 years ago)
• Last Synced: 2025-03-11T03:31:48.592Z (3 months ago)
• Topics: react, react-router
• Language: TypeScript
• Homepage:
• Size: 108 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-router-refreshable

Supports refresh (remount) on react-router-dom

[![version](https://flat.badgen.net/npm/v/react-router-refreshable)](https://www.npmjs.com/package/react-router-refreshable)

[![license](https://flat.badgen.net/github/license/skt-t1-byungi/react-router-refreshable)](https://github.com/skt-t1-byungi/react-router-refreshable/blob/master/LICENSE)

[![test](https://github.com/skt-t1-byungi/react-router-refreshable/actions/workflows/test.yml/badge.svg)](https://github.com/skt-t1-byungi/react-router-refreshable/actions/workflows/test.yml)

## Install

```sh

npm i react-router-refreshable

```

## Example

```js

import { Refreshable } from 'react-router-refreshable'

```

```jsx

    

        

            

                

            

            

                

            

            {/* ... */}

        

    

```

## Description

When the user clicks on a link with the same url as the current url on the react-router, nothing happens. However, most users expect the page to refresh. Solving with `location.reload()` (or ``) is wasteful.

The `Refreshable` component of `react-router-refreshable` remounts `children` when `history.push` to the same url. It is possible to efficiently provide the user's expected result.

See a **[Demo](https://codesandbox.io/s/react-router-refreshable-demo-cw8gj?file=/src/App.js)**

### Nested Refreshable

Each page may have different areas to expect to refresh. Nested Refreshables can dynamically narrow the refresh area.

```jsx

    

        {/* 👇 This component is not refreshed. */}

        

            

                 {/* 👈 This component can be refreshed. */}

            

            {/* ... */}

            

                 {/* 👈 This component can be refreshed. */}

            

        

    

    {/*...*/}

```

### `on` event listener prop

There is an `on` property that triggers when the refresh is started.

```jsx

 console.log('Start refreshing!')}>{/* ... */}

```

### useIsRefreshingRef()

`useIsRefreshingRef()` returns a `RefObject` indicating whether it is refreshing. Although not recommended, ignoring some logic in the effects hook can improve performance.

```js

import { useIsRefreshingRef } from 'react-router-refreshable'

```

```js

function Page() {

    const isRefreshingRef = useIsRefreshingRef()

    useEffect(() => {

        if (!isRefreshingRef.current) {

            /* ... Run only when not refresh */

        }

        return () => {

            if (!isRefreshingRef.current) {

                /* ... Run only when not refresh */

            }

        }

    }, [])

    /* ... */

}

```

## License

MIT