https://github.com/lagunovsky/recoil-react-router

A Recoil binding for React Router
https://github.com/lagunovsky/recoil-react-router

Last synced: about 2 months ago
JSON representation

A Recoil binding for React Router

• Host: GitHub
• URL: https://github.com/lagunovsky/recoil-react-router
• Owner: lagunovsky
• License: mit
• Created: 2021-09-12T14:39:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-31T11:22:41.000Z (about 3 years ago)
• Last Synced: 2024-04-26T16:04:26.182Z (8 months ago)
• Language: TypeScript
• Size: 31.3 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Recoil React Router

======================

A Recoil binding for React Router requires React 16.8, Recoil 4.0, React Router 6.0 or later

## Installation

```

$ npm install --save @lagunovsky/recoil-react-router

```

## Usage

1) install and import `@lagunovsky/recoil-react-router`

2) create `router` instance using `makeRouter()`

3) use `` instead of ``

### Navigation

To change the current location, you'll want to use one of the following:

- `router.history.push` - Pushes a new location onto the history stack

- `router.history.replace` - Replaces the current location with another

- `router.history.go` - Changes the current index in the history stack by a given delta

- `router.history.back` - Navigates one entry back in the history stack

- `router.history.forward` - Navigates one entry forward in the history stack

## API

#### makeRouter

```ts

type Router = {

  state: RecoilValue<{ action: Action, location: Location }>

  history: History

}

function makeRouter(getHistory: () => History = createBrowserHistory, namespace: string = 'router'): Router {}

```

Creates a routing object that contains the current state of the location and history for manipulating the location

---

#### RecoilReactRouter

```ts

type RouterProps = {

  router: Router

  children?: React.ReactNode

  basename?: string

  static?: boolean

}

function RecoilReactRouter(props: RouterProps): React.ReactNode {}

```

Component that synchronizes `recoil`, `history` and `react-router`

---

#### useTimeTraveling()

A hook that allows to use [time travel](https://recoiljs.org/docs/guides/dev-tools#time-travel)

## Example

```typescript jsx

import { makeRouter, RecoilReactRouter, useTimeTraveling } from '@lagunovsky/recoil-react-router'

import { createBrowserHistory } from 'history'

import React from 'react'

import ReactDOM from 'react-dom'

import { Route, Routes } from 'react-router'

import { RecoilRoot, useRecoilValue } from 'recoil'

const router = makeRouter()

router.history.push('/hello')

function Page() {

  const { location } = useRecoilValue(router.state)

  return (

    
{location.pathname}

  )

}


function App() {

  useTimeTraveling() // if you want to use time travel

  return (

    

      

        }/>

      

    

  )

}

ReactDOM.render(}/>, document.getElementById('app'))

```