Biblioteca de componentes visuais para acelerar a construção de interfaces digitais. Feita com o tema da Raposinha Festeira.
Clique aqui para visualizar a documentação de pre visualização dos componentes.
Atenda aos requisitos mínimos e execute as seguintes etapas para utilizar esta biblioteca de componentes.
- Aplicação em React JS + Styled Components;
- Instalar a biblioteca com o npm;
- Importar o tema principal e os estilos globais;
- Começar a utilizar os componentes!
Você precisa ter iniciado uma aplicação em React JS e ter o Styled Components como dependência.
Em desenvolvimento...
Em uma aplicação React, importe o tema principal e os estilos globais no ponto de início da aplicação, por padrão o arquivo index.tsx
no diretório src
do seu projeto. Por ex.:
/**
* Uma aplicação em React:
*/
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
/**
* Você precisa ter o styled-components como dependência do seu projeto
*/
import { ThemeProvider } from "styled-components";
/**
* Importar o tema principal e os estilos globais da biblioteca
*/
import { theme, GlobalStyles } from "raposinha-ds";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<ThemeProvider theme={theme}> // usar o tema principal como base do ThemeProvider do styled-components
<GlobalStyles /> // instânciar os estilos globais
<App />
</ThemeProvider>
</React.StrictMode>
);
Agora podemos utilizar os componentes da biblioteca para construir as páginas da sua aplicação.
import React from "react";
/**
* Importar os componentes da biblioteca
*/
import { Button, Input } from "raposinha-ds";
export default const LoginForm = () => (
<form>
<Input type="email" placeholder="Seu e-mail"> // instânciar os componentes
<Input type="password" placeholder="Sua senha">
<Button type="submit">Entrar</Button>
</form>
);