feat: Added queryParams that will extract query parameters and add them to props

refactor: Remove the first parameter and accept it in the object instead

Author: drager

src/__snapshots__/index.test.tsx.snap

@@ -6,12 +6,24 @@ exports[`withParams should extract a single param 1`] = `
 </span>
 `;
 
+exports[`withParams should extract a single query parameter 1`] = `
+<span>
+  /login
+</span>
+`;
+
 exports[`withParams should extract multiple params 1`] = `
 <span>
   1 - ben
 </span>
 `;
 
+exports[`withParams should extract multiple query parameters 1`] = `
+<span>
+  /login - 1489995623368
+</span>
+`;
+
 exports[`withParams should extract params with exactly false 1`] = `
 <span>
   1 - ben

src/index.test.tsx

@@ -6,7 +6,7 @@ import {withParams} from './index'
 
 describe('withParams', () => {
   it('should extract a single param', () => {
-    const ShowName = withParams('name', {match: '/user/:name'})(({name}) =>
+    const ShowName = withParams({params: 'name', match: '/user/:name'})(({name}) =>
       <span>{name}</span>
     )
 
@@ -20,7 +20,7 @@ describe('withParams', () => {
   })
 
   it('should extract multiple params', () => {
-    const ShowIdAndName = withParams(['id', 'name'], {match: '/user/:id/:name'})(({id, name}) =>
+    const ShowIdAndName = withParams({params: ['id', 'name'], match: '/user/:id/:name'})(({id, name}) =>
       <span>{id} - {name}</span>
     )
 
@@ -34,7 +34,8 @@ describe('withParams', () => {
   })
 
   it('should extract params with exactly false', () => {
-    const ShowIdAndName = withParams(['id', 'name'], {
+    const ShowIdAndName = withParams({
+      params: ['id', 'name'],
       match: '/user/:id/:name',
       exactly: false,
     })(({id, name}) =>
@@ -49,4 +50,38 @@ describe('withParams', () => {
 
     expect(toJson(wrapper)).toMatchSnapshot()
   })
+
+  it('should extract a single query parameter', () => {
+    const Display = withParams({
+      queryParams: 'next',
+      match: '/users',
+    })(({next}) =>
+      <span>{next}</span>
+    )
+
+    const wrapper = render(
+      <Router initialEntries={['/users?next=/login']}>
+        <Display />
+      </Router>
+    )
+
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
+
+  it('should extract multiple query parameters', () => {
+    const Display = withParams({
+      queryParams: ['next', 'timestamp'],
+      match: '/users',
+    })(({next, timestamp}) =>
+      <span>{next} - {timestamp}</span>
+    )
+
+    const wrapper = render(
+      <Router initialEntries={['/users?next=/login&timestamp=1489995623368']}>
+        <Display />
+      </Router>
+    )
+
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
 })

src/index.tsx

@@ -1,3 +1,4 @@
+import {parse} from 'querystring'
 import * as React from 'react'
 import {ReactType} from 'react'
 import DefaultRoute from 'react-router/Route'
@@ -15,42 +16,66 @@ function extractParams(names, params) {
   return newProps
 }
 
+function extractQueryParams(queryParamNames, queryString) {
+  return extractParams(queryParamNames, parse(queryString.substr(1)))
+}
+
 export type Options = {
+  params?: string|Array<string>,
   match?: string
   exactly?: boolean
   state?: string|Array<string>
   routeComponent?: ReactType
   routeProps?: any
+  queryParams?: string|Array<string>
 }
 
 /**
  * HOC for extracting router params.
  *
  * Example:
  *
- * ```
- * const ShowName = withParams('name', {match: '/user/:name'})(({name}) =>
+ * ```typescript
+ * const ShowName = withParams({params: 'name', match: '/user/:name'})(({name}) =>
  *   <span>{name}</span>
  * )
  * ```
+ *
+ * ```typescript
+ * const ShowIdAndName = withParams({params: ['id', 'name'], match: '/user/:id/:name'})(({id, name}) =>
+ *   <span>{id}{name}</span>
+ * )
+ * ```
  */
-export const withParams = (names, {match, exactly = true, state, routeComponent: Route = DefaultRoute, routeProps}: Options = {}) => WrappedComponent => {
+export const withParams = (
+  {
+    params: paramsNames, match, exactly = true,
+    state, routeComponent: Route = DefaultRoute,
+    routeProps, queryParams,
+  }: Options = {}
+) => WrappedComponent => {
   const displayName = wrapDisplayName(WrappedComponent, 'withParams')
 
-  names = Array.isArray(names) ? names : [names]
+  paramsNames = Array.isArray(paramsNames) ? paramsNames : [paramsNames]
+  queryParams = Array.isArray(queryParams) ? queryParams : [queryParams]
+
   if (state) {
     state = Array.isArray(state) ? state : [state]
   }
 
   if (match) {
     return setDisplayName(displayName)(props =>
       <Route {...routeProps} exact={exactly} path={match} render={({match: {params} = {params: []}, location}) =>
-        <WrappedComponent {...props} {...extractParams(names, params)} {...extractParams(state, location.state)} />
+        <WrappedComponent {...props}
+          {...extractParams(paramsNames, params)}
+          {...extractParams(state, location.state)}
+          {...extractQueryParams(queryParams, location.search)}
+        />
       } />
     )
   }
 
   return setDisplayName(displayName)(
-    props => <WrappedComponent {...props} {...extractParams(names, props.params)} />
+    props => <WrappedComponent {...props} {...extractParams(paramsNames, props.params)} />
   )
 }