https://github.com/sucodev/react-router-effect
https://github.com/sucodev/react-router-effect
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/sucodev/react-router-effect
- Owner: sucodev
- License: mit
- Created: 2020-11-03T00:11:48.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-11-03T00:35:18.000Z (over 5 years ago)
- Last Synced: 2025-02-09T21:19:32.759Z (over 1 year ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## React Router Effect - Version 0.1
Para começar a utilizar o React Router Effect, será necessário instalar o : react-router-dom ( versão 6.0 beta )
### Instalação :
1) ```yarn add history babel-types react-router-dom@next```
2) ```npm i history react-router-dom@next```
### Exemplos de uso :
Dentro de Routes, declare o componente RouterEffect e passe como parâmetro o tempo em que o componente será renderizado em tela.
Já, para aplicar as animações nos componentes será preciso declarar em um estilo global as classes que estão no arquivo style.css
No Exemplo abaixo, o componente , levará 500ms para ser renderizado após o clique do usuário.
```
} time={600} end />
} time={800} />
} time={500} />
} time={500} />
} time={500} />
```
### Componente Contato
```
import React from 'react';
import { Container } from './style';
const Contact = () => {
return (
Support
Fale conosco
);
};
export default Contact;
```
### Componente Com Link
```
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
const [posts, setPosts] = React.useState(null);
React.useEffect(() => {
async function getAllPost(url) {
const response = await fetch(url);
const json = await response.json();
setPosts(json);
}
getAllPost('http://localhost:1337/postagens');
}, []);
if (posts === null) return null;
return (
<>
// Neste exemplo foi usado a animação fadeIn
Um site simples usando reactjs
{posts.map((post) => (
))}
>
);
};
export default Home;
```