reactstrap

Reactstrap

Componentes de reação sem estado para o bootstrap 5.

Se você estiver usando o Bootstrap 4, precisará usar o ReactStrap V8

Começando

Siga as instruções do Create-React-App para começar e siga a versão ReactStrap de Adicionar Bootstrap.

tl; dr

 npx create-react-app my-app
cd my-app/
npm start

ou, se npx (nó> = 6 e npm> = 5.2) não estiver disponível

 npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

Em seguida, abra http: // localhost: 3000/para ver seu aplicativo. A estrutura inicial do seu aplicativo está configurada. Em seguida, vamos adicionar reactstrap e bootstrap.

Adicionando bootstrap

Instale o ReactStrap e o Bootstrap do NPM. O ReactStrap não inclui o Bootstrap CSS, então isso precisa ser instalado também:

 npm i bootstrap
npm i reactstrap react react-dom

Importar CSS de Bootstrap no arquivo src/index.js :

 import 'bootstrap/dist/css/bootstrap.css' ;

Importar componentes ReactStrap necessários no arquivo src/App.js ou seus arquivos de componentes personalizados:

 import { Button } from 'reactstrap' ;

Agora você está pronto para usar os componentes do ReactStrap importado na hierarquia de componentes definidos no método Render. Aqui está um exemplo App.js refeito usando o ReactStrap.

Dependências

Dependências de pares necessárias

Essas bibliotecas não são incluídas com reactstrap e são necessárias em tempo de execução:

• reagir
• react-dom

Sobre o projeto

Esta biblioteca contém componentes do Bootstrap React que favorecem a composição e o controle. A biblioteca não depende do jQuery ou JavaScript de bootstrap. No entanto, o Poppers.js via React-Popper é invocado para o posicionamento avançado de conteúdo, como dicas de ferramentas, popovers e suspensos de flagelo automático.

Existem alguns conceitos principais a serem entendidos para aproveitar ao máximo esta biblioteca.

1. Espera -se que seu conteúdo seja composto via props. crianças, em vez de usar adereços nomeados para passar nos componentes.

    // Content passed in via props
   const Example = ( props ) => {
     return (
       < p > This is a tooltip < TooltipTrigger tooltip = { TooltipContent } > example </ TooltipTrigger > ! </ p >
     ) ;
   }
   
   // Content passed in as children (Preferred)
   const PreferredExample = ( props ) => {
     return (
       < p >
         This is a < a href = "#" id = "TooltipExample" > tooltip </ a > example.
         < Tooltip target = "TooltipExample" >
           < TooltipContent />
         </ Tooltip >
       </ p >
     ) ;
   }

2. Os atributos nesta biblioteca são usados ​​para passar no estado, aplicar convenientemente classes modificadores, ativar a funcionalidade avançada (como a Tether) ou incluir automaticamente elementos não baseados em conteúdo.

   Exemplos:

   • isOpen - Estado atual para itens como suspensão, popa, dica de ferramenta
   • toggle - retorno de chamada para alternar isOpen no componente de controle
   • color - aplica aulas de cores, ex: <Button color="danger"/>
   • size - para controlar as classes de tamanho. Ex: <Button size="sm"/>
   • tag - Personalize a saída do componente passando em um nome ou componente de elemento
   • Adereços baseados em booleanos (atributos) quando possível para classes de estilo alternativo ou conteúdo visually-hidden

Documentação

https://reactstrap.github.io

A pesquisa de documentação é alimentada pelo DocSearch da Algolia.

Códigos e exemplos de caixa

Aqui estão alguns exemplos prontos para uso para o Código e caixa com os quais você pode experimentar.

https://github.com/reactstrap/code-sandbox-examples

Contribuindo

Desenvolvimento

Instale dependências:

yarn install

Execute exemplos em http: // localhost: 8080/com webpack dev server:

yarn start

Executar testes e relatório de cobertura:

yarn cover

Assistir testes:

yarn test 

Liberação

Ramificações de liberação/versão/notas serão criadas e mantidas automaticamente pela ação de release-por favor, o GitHub Action. Quando você estiver pronto para publicar o lançamento, basta mesclar a filial de lançamento. A versão será criada, o novo pacote será publicado e os documentos atualizados serão implantados para https://reactsstrap.github.io/.

Na natureza

Organizações e projetos usando reactstrap

• Aeronave -REACT - Demo - A aeronave fornece a todos os componentes que um desenvolvedor precisa para criar aplicativos da Web com uso intensivo de dados usando o React.
• Componente-templado
• Video-react
• CoreUi-Free-Bootstrap-Admin-Template-Demo
• App de exemplo do Admin Dashboard criado com ReactStrap - Demo
• Devextreme React Grid - É uma grade de dados sem estado construída sobre o reactstrap com paging, classificação, filtragem, agrupamento, seleção, edição e recursos de rolagem virtual.
• Gráfico Devextreme React - um gráfico construído sobre o reactstrap que visualiza dados usando uma variedade de tipos de séries, incluindo barras, linha, área, dispersão, torta e muito mais.
• REACTSTRAP -SCROLLSPY - Demo
• FormstRAP - Demo - Deixe seu componente de entrada reactstrap integrar -se perfeitamente usando Formik
• Jimu UI - Demo - A Plataforma de Mapping da Biblioteca da UI da Biblioteca para Arcgis.

Envie um PR para adicionar a esta lista!

Procurando construir, documentar e publicar componentes reutilizáveis ​​construídos sobre reactstrap ? Considere fazer marcar https://github.com/reactstrap/component-template para iniciar seu projeto!