• To create a nested route (like /home/homey ), simply nest the component inside of the component within and your route will be created .
  • Container gives you the container component with all the application state.
  • The function call returns the current state object.
  • Desklamp allows you to keep your state in a single state object.
  • // Child components become your routable urls

clean routing and state container for react

@JavaScriptKicks: desklamp - clean routing and state container for react by desklampio #javascript #reactjs via JavaScriptKicks

Please help us improve Desklamp by filling out our Feedback Survey

Desklamp is a React library which provides a state container and easy creation of routes.

This module is in active development! We will release a few more iterations in the upcoming weeks. Please submit any issues and/or feature requests and we will try to incorporate them. Or reach out to our team on Gitter


gives you the container component with all the application state.

Routing in Desklamp is meant to get you up and running with client-side page navigation and url updates, as well as browser history, as soon as possible. To create basic navigation, simply nest your components inside the

component Desklamp provides. For example, if you want to create routes for components

, first define these components as you normally would. Then import them into your index.js file, and then nest them inside the

component like so:

and your route will be created accordingly.


component or simple anchor tags. You can mix and match these two approaches, if you wish to link to an external site or a server route on your navigation, simply use a standard anchor tag.

component. This will declare your initial state, bind your customized functions to the state and display your custom Navbar across all views.

will look like this:

, using its default passed in props and powers:

Desklamp provides some helper methods to make changing views easy.

is a function that takes as the first parameter the string name of the route you wish to switch to. The optional second parameter is an object representing the state change you wish to make. This object will be automatically passed to Desklamp.updateState() to update the state of your application before routing. This function allows the developer to make asynchronous calls and change the view only after data is returned.

section of the Container component. This allows you, the developer to run functions on the initial loading of the application at the highest level.

takes in an object of the values you would like to change in your state. By default Desklamp.updateState maintains immutability and creates an new object with all of the changes before calling the default React.js setState function.

is a simple function that can be called anywhere in your application to show the current state. It can be very useful for debugging and logging what your state looks like if you are experiencing issues with your state data not looking how you think it should. The function call returns the current state object.

refers to the displayed text of the link.

prop will be the function to be executed prior to the view rendering.

Desklamp automatically keeps track of a history of application state. Currently developing useful rollback of state and exposure of history object to the developer.

We are continually adding and improving error handling messages to help with debugging. Please submit any suggestions or requests to help us improve our error messages.

A floor lamp is a desk lamp if you put it on your desk.