react-composite-router
Create predictable ui composition by declaration of the routes tree.
Without Url sharing in any Link or other places. Url must be hidden!
$ npm install react-composite-router --save
;;;; const App = <div> <h1>App!</h1> <Link state="app.settings" params= id: 123 >Settings</Link> <Slot name="appBody" /> </div> const SettingsBody = <div>Settings Body! id:timeStamp</div>; // define the routes treeconst tree = ; const appRoute = tree; appRoute; const history = ; ;
<Router />
RouterpropTypes = children: PropTypesnodeisRequired onChange: PropTypesfunc routes: routesPropTypes // routes by name (returns from routesTree.getRoutes()) history: PropTypesobjectisRequired // instance of history.js;
history - instance of history.js
<Link />
LinkpropTypes = state: PropTypesstringisRequired // state name reset: PropTypesbool // set true, if you want to reset inherited params for transition params: PropTypesobjectisRequired // stateParams reload: PropTypesboolisRequired // if it is true page will be reloaded after click replace: PropTypesboolisRequired // history.replace onClick: PropTypesfunc children: PropTypesanyisRequired disabled: PropTypesboolisRequired className: PropTypesstring activeStateClass: PropTypesstring // when state or child of this state will be active activeClass: PropTypesstring // only if this state will be active disabledClass: PropTypesstring // only if link is disabled
<Redirect />
RedirectpropTypes = // the same description as Link has state: PropTypesstringisRequired reset: PropTypesbool params: PropTypesobject reload: PropTypesbool replace: PropTypesbool
<Slot />
SlotpropTypes = name: PropTypesstringisRequired // name of slot props: PropTypesobject // props for component render: PropTypesfunc // render function (Component, props, stateParams, stateName) children: PropTypes // fallback children (if slot will be empty in composition). function (props, stateParams, stateName);
routesTree().createRootRoute(name, definition)
routesTree().createRootRoute(name, definition).createChildRoute(childName, definition);
name - String - required
const definition = url: '/some/path/:id' // segment of url, params: {} // default params slots: // slots by name someSlotName: Component ;
usage
; const tree = ; const route = routesTree; route; // create an child. name must starts from parent name
HOCs
referring('_statePropName', mapPropsFunc)(Component)
Provide possibility to create your own link or button.
New Component will recognize additional props like:
mapPropsFunc = (props) => ({
state: PropTypes.string.isRequired,
reset: PropTypes.bool,
params: PropTypes.object,
reload: PropTypes.bool,
replace: PropTypes.bool
})
let <div ...otherProps data-href=statehref onClick= state>children</div>; MyComponentpropTypes = state: PropTypesshape href: PropTypesstringisRequired name: PropTypesstringisRequired // name of state apply: PropTypesfuncisRequired // function for calling if some event was fired params: PropTypesobjectisRequired // state params isActive: PropTypesboolisRequired // true if this state is active (exactly) isActiveState: PropTypesboolisRequired // true if this state or child of this state is active ; MyComponent = MyComponent; <MyComponent state="my-state-name" params= someParam: 3 reload=true replace=false reset=true/>Some</MyComponent>;
Using with redux
this router provide simple redux-reducer. it useful if you are lazy as me =)
;; const store = ; const onStateChange = { store; // deliberately call store.dispatch or create special handler. up to you}; ;