{"id":14969972,"url":"https://github.com/reactual/what-props-changed","last_synced_at":"2026-02-26T20:04:07.525Z","repository":{"id":91190879,"uuid":"129537968","full_name":"reactual/what-props-changed","owner":"reactual","description":"A React utility used to detect changed props when a component updates.","archived":false,"fork":false,"pushed_at":"2018-04-14T17:19:20.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-09T00:31:58.012Z","etag":null,"topics":["javscript","jsx","react","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/what-props-changed","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactual.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-14T17:12:31.000Z","updated_at":"2019-02-10T19:01:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"07cb4a6a-2301-4da2-88c7-a1fb0e006439","html_url":"https://github.com/reactual/what-props-changed","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"2a51d232c05c0df189b925ea76068a23890c52cb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactual%2Fwhat-props-changed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactual%2Fwhat-props-changed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactual%2Fwhat-props-changed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactual%2Fwhat-props-changed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactual","download_url":"https://codeload.github.com/reactual/what-props-changed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239721490,"owners_count":19686289,"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":["javscript","jsx","react","reactjs"],"created_at":"2024-09-24T13:42:47.128Z","updated_at":"2026-02-26T20:04:07.469Z","avatar_url":"https://github.com/reactual.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## what-props-changed\nA simple React development tool to help find the props that caused a Component to update.\n\nBy default, it will log to the browser console any detected changes, with their original and new values.\n\n```js\n// Example Output:\n\nSidebar, props changed: 1\n {\n  \"sidebar\": {\n    \"old\": \"menu\",\n    \"new\": \"list\"\n  }\n}\n\n```\n\n### Installation\n\n```bash\n# yarn\nyarn add what-props-changed\n\n# npm\nnpm install --save what-props-changed\n\n```\n\n### Usage\n\n```js\n\nimport * as React from 'react'\nimport whatPropsChanged from 'what-props-changed'\n\nclass Sidebar extends React.Component {\n\n  componentWillReceiveProps (nextProps) {\n    whatPropsChanged(this.props, nextProps, 'Sidebar')\n  }\n\n  render() {\n    return \u003cdiv\u003e{this.props.title}\u003c/div\u003e\n  }\n}\n\n```\n\n### Arguments\n\n\n| Options   | Type   | Default | Description                                                          |\n|-----------|--------|---------|----------------------------------------------------------------------|\n| props     | object | {}      | Original (props or source) object                                    |\n| nextProps | object | {}      | Updated (props or source) object                                     |\n| name      | string | ''      | Optional name or helpful description that will be logged with output |\n| options   | object | options | Optional options object, see options below.                          |\n\n### Options\n\nAn object you can pass as the 4th argument when calling `whatPropsChanged`\n\n| Options  | Type    | Default | Description                                                     |\n|----------|---------|---------|-----------------------------------------------------------------|\n| doReturn | boolean | false   | Return the changes object                                       |\n| string   | boolean | true    | Logs the changes as JSON.stringified for easier console viewing |\n| log      | boolean | true    | Log prop changes object to console                              |\n\n\n### Notes\n\n`what-props-changed` provides a default export, you can use `whatPropsChanged` or `whatChanged` etc. You can also pass it generic objects to compare instead of props. It will iterate over the first object argument.\n\n\n\n### Additional Documentation\n\nSee `src/index.js` for source code.\n\n```js\n\n/**\n * Logs to console, props that caused a Component to update\n *\n * @param  {Object} props     Component current props\n * @param  {Object} nextProps Component updated props\n * @param  {String} name      Component name or description for log\n * @param  {Object} opts      Additional options\n * @return {undefined}        Logs changes to console\n * @example\n\n  // Usage\n\n  componentWillReceiveProps (nextProps) {\n    whatPropsChanged(this.props, nextProps, 'Sidebar')\n  }\n\n  // Add options if desired, as a 4th argument.\n  // Default values included below\n\n  const options = {\n    doReturn: false, // return changed props object\n    string: true, // log object instead of a JSON.stringified object\n    log: true, // log results to console\n  }\n\n */\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactual%2Fwhat-props-changed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactual%2Fwhat-props-changed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactual%2Fwhat-props-changed/lists"}