{"id":21667140,"url":"https://github.com/space-fe/react-query-string-to-props","last_synced_at":"2025-04-12T01:32:07.874Z","repository":{"id":57342962,"uuid":"190320318","full_name":"space-fe/react-query-string-to-props","owner":"space-fe","description":"Mapping query string from url to Component props seamlessly.","archived":false,"fork":false,"pushed_at":"2020-01-07T09:28:06.000Z","size":311,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-15T05:30:34.198Z","etag":null,"topics":["array","enum","mapping","props","querystring","react","to","url"],"latest_commit_sha":null,"homepage":"https://space-fe.github.io/query2props","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/space-fe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-05T03:34:00.000Z","updated_at":"2019-11-29T03:09:29.000Z","dependencies_parsed_at":"2022-09-16T02:50:29.510Z","dependency_job_id":null,"html_url":"https://github.com/space-fe/react-query-string-to-props","commit_stats":null,"previous_names":["space-fe/react-query-to-state"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-query-string-to-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-query-string-to-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-query-string-to-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Freact-query-string-to-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/space-fe","download_url":"https://codeload.github.com/space-fe/react-query-string-to-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248504198,"owners_count":21115133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["array","enum","mapping","props","querystring","react","to","url"],"created_at":"2024-11-25T11:33:59.837Z","updated_at":"2025-04-12T01:32:07.852Z","avatar_url":"https://github.com/space-fe.png","language":"JavaScript","readme":"# react-query-string-to-props\n[![Build Status](https://travis-ci.org/space-fe/react-query-string-to-props.svg?branch=master)](https://travis-ci.org/space-fe/react-query-string-to-props)\n\nMapping query string from url to Component props seamlessly. [react-query-string-to-props](https://space-fe.github.io/query2props)\n\n## Installation\nUse `npm`\n```shell\nnpm install react-query-string-to-props\n```\nUse `yarn`\n```shell\nyarn add react-query-string-to-props\n```\n\n## Usage\n\n### ES6 Class Component\n```javascript\nimport React from 'react'\nimport queryToPropsHOC, { QueryPropTypes, ValidateTypes } from 'react-query-string-to-props'\nimport { createBrowserHistory } from 'history'\n\nclass Searcher extends React.Component {\n  handleChange = (event) =\u003e {\n    const { updateQueryState } = this.props\n    updateQueryState({ searchStr: event.target.value }, queryObj =\u003e {\n      console.log(queryObj.searchStr)\n    })\n  }\n\n  render () {\n    const { searchStr } = this.props\n\n    return (\n      \u003cdiv\u003e\n        \u003cspan\u003e{searchStr}\u003c/span\u003e\n        \u003cinput onChange={this.handleChange} /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst config = {\n  history: createBrowserHistory(),\n  queryPropsConfig: {\n    searchStr: QueryPropTypes.string\n  },\n  defaultQueryProps: {\n    searchStr: 'abcde'\n  },\n  validatorMap: {\n    searchStr: [\n      {\n        type: ValidateTypes.regexp,\n        value: /^abc/i\n      }\n    ]\n  },\n  replaceRouteWhenChange: true,\n  mapDefaultQueryPropsToUrlWhenMounted: true\n}\n\nexport default queryToPropsHOC(Searcher, config)\n```\n\n### Functional Component\n```javascript\nimport React from 'react'\nimport { createBrowserHistory } from 'history'\nimport queryToPropsHOC, { QueryPropTypes, ValidateTypes } from 'react-query-string-to-props'\n\nconst Searcher = (props) =\u003e {\n  const handleChange = (event) =\u003e {\n    const { updateQueryState } = props\n    updateQueryState({ searchStr: event.target.value })\n  }\n\n  const { searchStr } = props\n\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{searchStr}\u003c/span\u003e\n      \u003cinput onChange={handleChange} /\u003e\n    \u003c/div\u003e\n  )\n}\n\nconst config = {\n  history: createBrowserHistory(),\n  queryPropsConfig: {\n    searchStr: QueryPropTypes.string\n  }\n}\n\nexport default queryToPropsHOC(Searcher, config)\n```\n\n### Multiple Components in one page\n```javascript\nimport React from 'react'\nimport { createBrowserHistory } from 'history'\nimport queryToPropsHOC, { QueryPropTypes, ValidateTypes } from 'react-query-string-to-props'\n\nconst history = createBrowserHistory(),\n\nclass Searcher extends React.Component {\n  render () {\n    const { searchStr1 } = this.props\n    return \u003cdiv\u003e{searchStr1}\u003c/div\u003e\n  }\n}\n\nconst FunctionalSearcher = (props) =\u003e {\n  const { searchStr2 } = props\n  return \u003cdiv\u003e{searchStr2}\u003c/div\u003e\n}\n\nconst config1 = {\n  history,\n  queryPropsConfig: {\n    searchStr1: QueryPropTypes.string\n  },\n  defaultQueryProps: {\n    searchStr1: 'str1'\n  },\n  validatorMap: {\n    searchStr1: [\n      {\n        type: ValidateTypes.range,\n        value: ['aaa', 'bbb']\n      }\n    ]\n  }\n}\n\nconst config2 = {\n  history,\n  queryPropsConfig: {\n    searchStr2: QueryPropTypes.string\n  },\n  defaultQueryProps: {\n    searchStr2: 'str2'\n  },\n  validatorMap: {\n    searchStr2: [\n      {\n        type: ValidateTypes.function,\n        value: (val) =\u003e {\n          return val.startsWith('test')\n        }\n      }\n    ]\n  }\n}\n\nconst SearcherQueryToStateComp = queryToPropsHOC(Searcher, config1)\nconst FunctionalSearcherQueryToStateComp = queryToPropsHOC(FunctionalSearcher, config2)\n\nexport default class App extends React.Component {\n  render () {\n    return \u003cReact.Fragment\u003e\n      \u003cSearcherQueryToStateComp /\u003e\n      \u003cFunctionalSearcherQueryToStateComp /\u003e\n    \u003c/React.Fragment\u003e\n  }\n}\n```\n\n## updateQueryState()\nAfter wrapping the `queryToPropsHOC`, the decorated Component will have a function property `updateQueryState`.\n### updateQueryState parameters\n- First parameter: new query key-value to be updated.\n- Second paramter: callback function with a new query object parameter.\n```javascript\nconst { updateQueryState } = this.props\nupdateQueryState({ searchStr: event.target.value }, (queryObj) =\u003e {\n  // do something\n  console.log(queryObj.searchStr)\n})\n```\n\n## Configuration\n| Name           | Type      | Default | Description                                                                                                                                                                                                                             |\n| -------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `history` | `object` |  | `Required`. History object, see [history](https://github.com/ReactTraining/history) for more information. |\n| `replaceRouteWhenChange` | `boolean` | `true` | `Optional`. If `true`, history.replace() will be called, or history.push() will be called when query is updated by Component. |\n| `mapDefaultQueryPropsToUrlWhenMounted` | `boolean` | `false` | `Optional`. If `true`, default query props will be mapped to url when Component mounted. |\n| `queryPropsConfig` | `object` | | Only properties declared in the queryPropTypes object will be mapped from the path to Component props, and the declared types will be used to decode the query string to Component props. |\n| `defaultQueryProps` | `object` | | Default query props. |\n| `validatorMap` | `object` | | `Optional`. ValidatorMap is a dictionary of properties validators. The key is a property name, and the value is an array of validator for this property. |\n\n### queryPropsConfig\nThe value of each key in `queryPropsConfig` can be a QueryPropType or a function.\n\n#### QueryPropTypes\n- number\n- string\n- boolean\n- array\n- numericArray\n\n### ValidatorMap\nValidatorMap is a dictionary of properties validators. The key is a property, and the value is an array of validator for this property.\n\n`ValidateTypes`:\n- range\n- regexp\n- function\n\n```javascript\nconst validatorMap = {\n  key1: [\n    {\n      type: ValidateTypes.range,\n      value: ['aa', 'bb', 'cc']\n    }\n  ],\n  key2: [\n    {\n      type: ValidateTypes.regexp,\n      value: /^test/i\n    },\n    {\n      type: ValidateTypes.function,\n      value: val =\u003e {\n        return val.endsWith('abc')\n      }\n    }\n  ]\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Freact-query-string-to-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspace-fe%2Freact-query-string-to-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Freact-query-string-to-props/lists"}