{"id":25799226,"url":"https://github.com/guilleasz/routehook","last_synced_at":"2025-02-27T15:42:17.238Z","repository":{"id":57343721,"uuid":"118962578","full_name":"guilleasz/RouteHook","owner":"guilleasz","description":"A React Component that wraps the Route Component of React-Router v4 with onEnter, onChange and onLeave hooks.","archived":false,"fork":false,"pushed_at":"2019-04-05T12:45:53.000Z","size":156,"stargazers_count":34,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T14:33:27.721Z","etag":null,"topics":["dummy-components","hooks","onchange","onenter","onleave","props","react","router-props","wrapper"],"latest_commit_sha":null,"homepage":"","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/guilleasz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-25T20:13:28.000Z","updated_at":"2022-09-02T14:26:59.000Z","dependencies_parsed_at":"2022-09-12T06:30:38.347Z","dependency_job_id":null,"html_url":"https://github.com/guilleasz/RouteHook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilleasz%2FRouteHook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilleasz%2FRouteHook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilleasz%2FRouteHook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilleasz%2FRouteHook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guilleasz","download_url":"https://codeload.github.com/guilleasz/RouteHook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241030020,"owners_count":19897010,"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":["dummy-components","hooks","onchange","onenter","onleave","props","react","router-props","wrapper"],"created_at":"2025-02-27T15:42:16.457Z","updated_at":"2025-02-27T15:42:17.233Z","avatar_url":"https://github.com/guilleasz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RouteHook\n\nA  React Component that wraps the `Route` Component of React-Router v4 with `onEnter`, `onChange` and `onLeave` hooks.\n\n## Motivation\n\nAlthough react-router v4 is great, and declarative routing is much better than static routing, there was one lost that seemed kind of unnecessary.\n\nNeeding to write dummy components as classes only to make use of their lyfecyle hooks as, `componentDidMount` when the pathname matches and the component is mounted,  `componentWillReceiveProps` when the pathname changes, or `componentWillUnmount` when the route don't match the route anymore, it's a bit annoying.\n\nLooking at a beautiful Stateless Functional Component, being turned into a React Class just to dispatch an action in its LifeCycle Hook... it just breaks my heart.\n\nThis component only purpose is to keep our dummy components as statless pure functions, and yet, be able to keep using our hooks when we navigate through our app.\n\n\n## Installation\n\n```\nnpm install --save react-route-hook\n```\n\n## Usage\n\n`RouteHook` takes the `path`, `component`, `render`, `exact`, and `strict` props as the official `Route` does, and takes two additional optional props:\n\n- `onEnter`\n- `onChange`\n- `onLeave`\n\n\u003e **IMPORTANT** `children` prop is not supported.\n\n### onEnter\n\n`onEnter` will run when the component beeing rendered by the route is mounted, and will receive as arguments the router props, this means, an object with the properties: `match`, `location` and `history`.\n\nonEnter is basically a wrapper around the functionality of `componentDidMount`.\n\n### onChange\n\n`onChange` will run when the component will receive new router props, and will receive as arguments the new props and the old ones. \n\nonChange is basically a wrapper around the functionality of `componentWillReceiveProps`.\n\n### onLeave\n\n`onLeave` will run when the component is going to be unmounted, probably beacause of the path doesn't match the route anymore.\n\nonLeave is basically a wrapper around the functionality of `componentWillUnmount`.\n\n### Example\n\n\n```JSX\nimport React from 'react';\nimport RouteHook from 'react-route-hook';\n\nconst Data = (props) =\u003e (\n  \u003cdiv\u003e\n    {props.data}\n  \u003c/div\u003e\n);\n\nclass AppContainer extends React.Component {\n\n  state = {\n    data: '',\n  }\n\n  fetchData = (props) =\u003e {\n    axios.get(`/api/${props.match.params.id}`)\n      .then(res =\u003e this.setState({ data: res.data }))\n  }\n\n  shouldFetchData = (newProps, oldProps) =\u003e {\n    if (oldProps.match.params.id !== newProps.match.params.id) {\n      this.fetchData(newProps)\n    }\n  }\n\n  logout(props) {\n    console.log(`You are leaving the route ${props.location.pathname}`)\n  } \n\n  render() {\n    return (\n      \u003cRouteHook \n        path=\"home/:id\"\n        onEnter={this.fetchData}\n        onChange={shouldFetchData}\n        onLeave={this.logout}\n        render={(routerProps) =\u003e \u003cData data={this.state.data} /\u003e}\n      /\u003e\n    )\n  }\n} \n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilleasz%2Froutehook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguilleasz%2Froutehook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilleasz%2Froutehook/lists"}