Skip to main content

Declarative router component for React.

http://strml.viewdocs.io/react-router-component

Project Overview

Usage is as simple as just returning a configured router component from your component's render() method: 
 <Locations>  
  <Location path="/" handler={MainPage} />  
  <Location path="/users/:username" handler={UserPage} />  
  <Location path="/search/*" handler={SearchPage} />  
  <Location path={/\/product\/([0-9]*)/} handler={ProductPage} />  
 </Locations>
Having routes defined as a part of your component hierarchy allows to dynamically reconfigure routing based on your application state. For example you can return a different set of allowed locations for anonymous and signed-in users.
React router component can dispatch based on location.pathname or location.hash if browser doesn't support History API (see hash routing).
Props can be passed through the router by setting them directly on each , or to all possible routes via a childProps hash.
Furthermore it provides advanced features like support for regex matching, full page server side rendering, multiple routers on the same page, querystring parsing, and contextual routers. Its functionality is tested using Saucelabs on all modern browsers (IE >= 9, Chrome >= 27, Firefox >= 25, Safari >= 6 and Mobile Safari on iPhone and iPad >= 6).
Its size is about 3.5kb gzipped.

Installation

React router component is packaged on npm: 
 npm install react-router-component

Documentationn



Note: Special thanks to Samuel Reed

Contact Me: sam@bitmex.com

Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.
Labels:

Comments

Post a Comment

Popular posts from this blog

React Autosuggest

Demo Check out the Homepage and the Codepen examples . Features WAI-ARIA compliant , with support for ARIA attributes and keyboard interactions Mobile friendly Plugs in nicely to Flux and Redux applications Full control over suggestions rendering Suggestions can be presented as plain list or multiple sections Suggestions can be retrieved asynchronously Highlight the first suggestion in the list if you wish Supports styling using CSS Modules , Radium , Aphrodite , JSS , and more You decide when to show suggestions (e.g. when user types 2 or more characters) Always render suggestions (useful for mobile and modals) Pass through arbitrary props to the input (e.g. placeholder, type, onChange , onBlur , or any other), or take full control on the rendering of the input (useful for integration with other libraries) Thoroughly tested Installation yarn add react-autosuggest or npm install react-autosuggest --save You can also use the standalone UMD bu...
Post a Comment
Read more

React CSS components

Motivation Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules. NOTE: The current implementation is based on Webpack but everything is ready to be ported onto other build systems (generic API is here just not yet documented). Raise an issue or better submit a PR if you have some ideas. Installation & Usage Install from npm: npm install react-css-components style-loader css-loader Configure in webpack.config.js: module.exports = { ... module: { loaders: [ { test: /\.react.css$/, loader: 'react-css-components', } ] } ... } Now you can author React components in Styles.react.css: Label { color: red; } Label:hover { color: white; } And consume them like regular React components: import {Label} from './styles.react.css' <Lab...
Post a Comment
Read more

React-Crouton - A message component for reactjs

Live Demo Getting Started Install via npm npm i react-crouton --save-dev Usage var Crouton = require('react-crouton') var data = { id: Date.now(), type: 'error', message: 'Hello React-Crouton', autoMiss: true || false, onDismiss: listener, buttons: [{ name: 'close', listener: function() { } }], hidden: false, timeout: 2000 } <Crouton id={data.id} type={data.type} message={data.message} onDismiss={data.onDismiss} buttons={data.buttons} hidden={data.hidden} timeout={data.timeout} autoMiss={data.autoMiss}> // You can render child component here // <ChildComponent /> </Crouton> Options id required, every message need an unique id. type: number message required, the message what you want show. type: string || array example: message: 'Hello React-Crouton' message: ['Hello', ...
1 comment
Read more