Examples

The examples are included in the repository on GitHub.

basic

Shows the bare minimum amount of work to get React URL Query working in your application when you are not using React Router or Redux. The basic steps are:

1. Use a history of some sort to control pushing or replacing items in the browser's history stack. Be sure to listen for changes to the history and force an update when they occur (see App.js)
2. Configure React URL Query to use the history in your application's setup (see index.js).
3. Use a urlPropsQueryConfig and addUrlProps to connect your component to React URL Query (see MainPage.js).

basic-mapUrlToProps

Shows a basic configuration to get React URL Query working in your application when you are not using React Router or Redux. Uses alternative approach of mapUrlToProps instead of urlPropsQueryConfig. The steps are:

1. Use a history of some sort to control pushing or replacing items in the browser's history stack. Be sure to listen for changes to the history and force an update when they occur (see App.js)
2. Configure React URL Query to use the history in your application's setup (see index.js).
3. Use a mapUrlToProps, mapUrlChangeHandlersToProps and addUrlProps to connect your component to React URL Query (see MainPage.js).

redux

Demonstrates how to integrate React URL Query with Redux (and no React Router). The only difference between this and the basic example is how you wrap your component with addUrlProps. The steps are:

1. Use a history of some sort to control pushing or replacing items in the browser's history stack. Be sure to listen for changes to the history and force an update when they occur (see App.js)
2. Configure React URL Query to use the history in your application's setup (see index.js).
3. Use a urlPropsQueryConfig and addUrlProps to connect your component to React URL Query. In this case, we wrap the connected component: addUrlProps(...)(connect(...)(MyComponent)) (see MainPage.js)

redux-with-actions

The most common way of integrating Redux with React URL Query is shown in the redux example. This project demonstrates an alternative approach, using dispatch and actions to change the URL. React Router is not used. The steps are:

1. Use a history of some sort to control pushing or replacing items in the browser's history stack. Be sure to listen for changes to the history and force an update when they occur (see App.js)
2. Configure React URL Query to use the history in your application's setup (see index.js). Disable auto-generation of change handlers by passing addChangeHandlers: false.
3. Attach the urlQueryMiddleware to Redux, optionally instantiating with a custom URL query reducer. (see index.js)
4. Create actions for URL updates with urlAction, urlReplaceInAction, urlPushInAction, etc. (see actions.js)
5. Create change handlers in mapDispatchToProps for the actions you've made. (see MainPage.js)
6. Use a urlPropsQueryConfig and addUrlProps to connect your component to React URL Query. In this case, we wrap the connected component: addUrlProps(...)(connect(...)(MyComponent)) (see MainPage.js)

react-router-v2-and-redux

Demonstrates how to use React URL Query with React Router v2 and Redux. This example also demonstrates using a custom type for a URL query parameter. The steps are:

1. Configure React URL Query to use the React Router's history in your application's setup (see index.js).
2. Use a urlPropsQueryConfig and addUrlProps to connect your component to React URL Query. In this case, we wrap the connected component: addUrlProps(...)(connect(...)(MyComponent)) (see MainPage.js).

react-router-v4-and-redux

Demonstrates how to use React URL Query with React Router v4 and Redux. This example also demonstrates using a custom type for a URL query parameter. When using React Router v4, we do not use configureUrlQuery as we do in all the others. Instead we use <RouterToUrlQuery>. The steps are:

1. Use <RouterToUrlQuery> to configure React URL Query to use the React Router's history in your application's setup (see index.js).
2. Use a urlPropsQueryConfig and addUrlProps to connect your component to React URL Query. In this case, we wrap the connected component: addUrlProps(...)(connect(...)(MyComponent)) (see MainPage.js).