{"id":25190245,"url":"https://github.com/sucodev/react-router-effect","last_synced_at":"2025-04-04T11:25:59.003Z","repository":{"id":186037514,"uuid":"309526589","full_name":"sucodev/React-Router-Effect","owner":"sucodev","description":null,"archived":false,"fork":false,"pushed_at":"2020-11-03T00:35:18.000Z","size":7,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T21:19:32.759Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/sucodev.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,"governance":null}},"created_at":"2020-11-03T00:11:48.000Z","updated_at":"2020-11-04T16:14:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"3ec52b19-15b3-4839-b8de-75b7bfaa6957","html_url":"https://github.com/sucodev/React-Router-Effect","commit_stats":null,"previous_names":["sucodev/react-router-effect"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodev%2FReact-Router-Effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodev%2FReact-Router-Effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodev%2FReact-Router-Effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodev%2FReact-Router-Effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sucodev","download_url":"https://codeload.github.com/sucodev/React-Router-Effect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247168011,"owners_count":20895037,"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":[],"created_at":"2025-02-09T21:19:38.123Z","updated_at":"2025-04-04T11:25:58.985Z","avatar_url":"https://github.com/sucodev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Router Effect - Version 0.1\nPara começar a utilizar o React Router Effect, será necessário instalar o : react-router-dom ( versão 6.0 beta )\n\n### Instalação : \n1) ```yarn add history babel-types react-router-dom@next```\n2) ```npm i history react-router-dom@next```\n\n### Exemplos de uso : \nDentro de Routes, declare o componente RouterEffect e passe como parâmetro o tempo em que o componente será renderizado em tela.\nJá, para aplicar as animações nos componentes será preciso declarar em um estilo global as classes que estão no arquivo style.css \nNo Exemplo abaixo, o componente \u003cContact/\u003e, levará 500ms para ser renderizado após o clique do usuário.\n\n```\n \u003cRoutes\u003e\n  \u003cRouterEffect path=\"/\" element={\u003cHome /\u003e} time={600} end /\u003e\n  \u003cRouterEffect path=\"about\" element={\u003cAbout /\u003e} time={800} /\u003e\n  \u003cRouterEffect path=\"contact\" element={\u003cContact /\u003e} time={500} /\u003e\n  \u003cRouterEffect path=\"p/:id\" element={\u003cPost /\u003e} time={500} /\u003e\n  \u003cRouterEffect path=\"*\" element={\u003cNotExist /\u003e} time={500} /\u003e\n \u003c/Routes\u003e\n``` \n ### Componente Contato\n ```\n import React from 'react';\n import { Container } from './style';\n\n  const Contact = () =\u003e {\n    return (\n      \u003cContainer className=\"fadeOut\"\u003e\n        \u003ch2\u003eSupport\u003c/h2\u003e\n        \u003cp\u003eFale conosco\u003c/p\u003e\n      \u003c/Container\u003e\n    );\n  };\n\nexport default Contact;\n```\n### Componente Com Link\n```\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst Home = () =\u003e {\n  const [posts, setPosts] = React.useState(null);\n\n  React.useEffect(() =\u003e {\n    async function getAllPost(url) {\n      const response = await fetch(url);\n      const json = await response.json();\n      setPosts(json);\n    }\n    getAllPost('http://localhost:1337/postagens');\n  }, []);\n\n  if (posts === null) return null;\n\n  return (\n    \u003c\u003e\n      \u003cContainer className=\"fadeIn\"\u003e // Neste exemplo foi usado a animação fadeIn\n        \u003ch1\u003e\n          Um site simples usando reactjs\n        \u003c/h1\u003e\n      \u003c/Container\u003e\n      \u003cPosts className=\"fadeIn\"\u003e\n        {posts.map((post) =\u003e (\n          \u003cLink key={post.id} to={`p/${post.id}`}\u003e\n            \u003cimg\n              src={`http://localhost:1337${post.imagem[0].url}`}\n              alt={post.Titulo}\n            /\u003e\n          \u003c/Link\u003e\n        ))}\n      \u003c/Posts\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Home;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsucodev%2Freact-router-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsucodev%2Freact-router-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsucodev%2Freact-router-effect/lists"}