https://github.com/mohitk05/react-router-fuzzy

A react-router wrapper for handling incorrect routes using fuzzy search.
https://github.com/mohitk05/react-router-fuzzy

fuzzy-search react-router router

Last synced: 26 days ago
JSON representation

A react-router wrapper for handling incorrect routes using fuzzy search.

• Host: GitHub
• URL: https://github.com/mohitk05/react-router-fuzzy
• Owner: mohitk05
• License: mit
• Created: 2019-01-28T18:05:08.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-09T03:50:35.000Z (over 5 years ago)
• Last Synced: 2024-10-16T12:37:03.142Z (3 months ago)
• Topics: fuzzy-search, react-router, router
• Language: JavaScript
• Homepage: https://mohitk05.github.io/react-router-fuzzy/
• Size: 1.64 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-router-fuzzy

> A react-router wrapper for handling incorrect routes using fuzzy search.

[![NPM](https://img.shields.io/npm/v/react-router-fuzzy.svg)](https://www.npmjs.com/package/react-router-fuzzy) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-router-fuzzy

```

## Usage

`react-router-fuzzy` provides a wrapper, `withFuzzy` for `Switch` component of `react-router-dom`. It also requires `Route` to be sent as it adds a default 404 route as a child to `Switch`. This component displays a list of nearest routes to the current path, if no matching route is found. You can specify your own 404 component, which then receives a `nearest` prop, which is an array of results as per [fuzzyset.js](https://glench.github.io/fuzzyset.js/) output.

```jsx

import React, { Component } from 'react'

import { Switch, Route } from 'react-router-dom'

import withFuzzy from 'react-router-fuzzy'

const WrappedSwitch = withFuzzy(Switch, Route)

const custom404 = props => {

  //custom component receives 'nearest' as a prop

  return 
{props.nearest.map(n => {n[1]})}

}


export default class SomeComponent extends Component {

  render () {

    return (

      

         
About
} />

         
Docs
} />

         
Pricing
} />

         
Contact
} />

      

    )

  }

}


```

## License

MIT © [mohitk05](https://github.com/mohitk05)