❤
npm
Sign UpSign In

ctrl-react-router

3.1.0 • Public • Published

ctrl-react-router

Build Status Codacy Badge Codacy Badge

An alternative way of handling routing in React.

Installation

Yarn is recommended for installation.

$ yarn add --dev ctrl-react-router

But you can still use npm:

$ npm install --save-dev ctrl-react-router

Props

log - Takes an optional debug logger.

Example:

<CtrlReactRouter log={debug('my-debug:router')}/>

Context Properties and Methods

CtrlReactRouter use React's getchildContext method to pass usable info and actions to its children. It's recommended that you use the CtrlReactComponent class to take full advantage of the router.

String hash

The parsed hash.

Example:

// Route is /settings#name
 
class Test extends CtrlReactComponent {
  render() {
     const {hash} = this.context.router
 
     return (
       <div>
         <div>Hash: {hash}</div>
       </div>
     )
  }
}
 
<CtrlReactRouter>
  <Test/>
</CtrlReactRouter>
 
// Output:
// Hash: name

Object query

The parsed query object.

Example:

// Route is /login?type=user&id=1989
 
class Test extends CtrlReactComponent {
  render() {
    const {query} = this.context.router
 
    return (
      <div>
        <div>ID: {query.id}</div>
        <div>Type: {query.type}</div>
      </div>
    )
  }
}
 
<CtrlReactRouter>
  <Test/>
</CtrlReactRouter>
 
// Output:
// ID: 1989
// Type: user

Array route

The parsed route object.

Example:

// Route is /app/users/1989/profile
 
class Test extends CtrlReactComponent {
  render() {
    const {route} = this.context.router
 
    return (
      <ul>
        {route.map((part) => <li>part</li>)}
      </ul>
    )
  }
}
 
<CtrlReactRouter>
  <Test/>
</CtrlReactRouter>
 
// Output:
// - app
// - users
// - 1989
// - profile

Boolean filterChildren(Any child)

Decide whether or not a child component should be rendered depending on what their routeFilter method returns. If it does not have a routeFilter method, always render the child.

  • param Any child - Child to be filtered.
  • returns Boolean - Whether the child should be rendered or not.

Example:

// filterChildren is called internally by the router to determine which child
// components should be rendered.
<CtrlReactRouter>
  // If the route is /fruits, this component will be rendered and filterChildren
  // will be internally called to filter its child components.
  <CtrlReactComponent routeFilter={([category]) => category === 'fruits'}>
    // Since this component does not have a routeFilter method, it will always
    // be rendered as long as the route begins with /fruits.
    <h1>Fruits</h1>
 
    // If the route is /fruits/apple, this component will be rendered and
    // filterChildren will be internally called to filter its child components.
    <CtrlReactComponent routeFilter={([fruit]) => fruit === 'apple'}>
      
      // Since this component does not have a routeFilter method, it will always
      // be rendered as long as the route begins with /fruits/apple.
      <h2>Apple</h2>
    </CtrlReactComponent>
  </CtrlReactComponent>
</CtrlReactRouter>

Boolean updateRoute(String path, Number scroll)

Update the URL path. This also updates state and browser history.

  • param String path - Target relative URL path.
  • param Number scroll - Target scroll top.
  • returns Boolean - If the route was successfully updated.

Example:

class Link extends CtrlReactComponent {
  handleClick(event) {
    event.preventDefault()
 
    this.context.router.updateRoute(this.props.href)
  }
 
  render() {
    return (
      <a click={this.handleClick.bind(this)}/>
    )
  }
}
 
<CtrlReactRouter>
  <Link href='/target-path'/>
</CtrlReactRouter>

License

Copyright (c) 2017 Martin Experiments LLC

MIT (https://www.opensource.org/licenses/MIT)

Readme

Keywords

Package Sidebar

Install

npm i ctrl-react-router

Repository

github.com/martin-experiments/ctrl-react-router

Homepage

github.com/martin-experiments/ctrl-react-router#readme

Weekly Downloads

1

Version

3.1.0

License

MIT

Unpacked Size

343 kB

Total Files

55

Last publish

Collaborators

  • suitupalex
Try on RunKit
Report malware