reactstrap

reaccionar

Componentes de reacción sin estado para Bootstrap 5.

Si está utilizando Bootstrap 4, deberá usar ReactStrap V8

Empezando

Siga las instrucciones Crear react-App para comenzar y luego siga la versión ReactStrap de agregar bootstrap.

tl; Dr

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

o, si npx (nodo> = 6 y npm> = 5.2) no está disponible

 npm install -g create-react-app

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

Luego abra http: // localhost: 3000/para ver su aplicación. La estructura inicial de su aplicación está configurada. A continuación, agregemos ReactStrap y Bootstrap.

Agregar bootstrap

Instale ReactStrap y Bootstrap a partir de NPM. ReactStrap no incluye CSS de arranque, por lo que esto también debe instalarse:

 npm i bootstrap
npm i reactstrap react react-dom

Importar Bootstrap CSS en el archivo src/index.js :

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

Importar componentes reactsprap requeridos dentro del archivo src/App.js o sus archivos de componentes personalizados:

 import { Button } from 'reactstrap' ;

Ahora está listo para usar los componentes ReactStrap importados dentro de su jerarquía de componentes definidos en el método de renderizado. Aquí hay un ejemplo de App.js reconstruido usando ReactStrap.

Dependencias

Dependencias de pares requeridas

Estas bibliotecas no están incluidas en ReactStrap y se requieren en tiempo de ejecución:

• reaccionar
• reaccionar

Sobre el proyecto

Esta biblioteca contiene componentes React Bootstrap que favorecen la composición y el control. La biblioteca no depende de jQuery o bootstrap JavaScript. Sin embargo, se confía en Poppers.js a través de React-Popper para el posicionamiento avanzado de contenido como información sobre herramientas, popovers y desplegables de flujo automático.

Hay algunos conceptos centrales para comprender para aprovechar al máximo esta biblioteca.

1. Se espera que su contenido esté compuesto a través de accesorios. Los niños en lugar de usar accesorios con nombre para pasar en 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. Los atributos en esta biblioteca se utilizan para pasar en el estado, aplicar convenientemente las clases de modificadores, habilitar la funcionalidad avanzada (como el atado) o incluir automáticamente elementos no basados ​​en el contenido.

   Ejemplos:

   • isOpen - Estado actual para elementos como desplegable, Popover, ToolTiP
   • toggle : devolución de llamada para alternar isOpen en el componente de control
   • color - Aplica clases de color, ex: <Button color="danger"/>
   • size : para controlar clases de tamaño. ex: <Button size="sm"/>
   • tag : personalice la salida del componente pasando en un nombre o componente de elemento
   • Props (atributos) basados ​​en booleanos cuando es posible para clases de estilo alternativas o contenido visually-hidden

Documentación

https://reactstrap.github.io

La búsqueda de documentación funciona con DocSearch de Algolia.

Ejemplos de CodesandBox

Aquí hay algunos ejemplos listos para usar para CodesandBox con los que puede experimentar.

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

Que contribuye

Desarrollo

Instalar dependencias:

yarn install

Ejecutar ejemplos en http: // localhost: 8080/con Webpack Dev Server:

yarn start

Ejecutar pruebas e informe de cobertura:

yarn cover

Pruebas de reloj:

yarn test 

Lanzamiento

Las ramas de lanzamiento/versiones/notas serán creadas y mantenidas automáticamente mediante la acción de GitHub por favor. Cuando esté listo para publicar el lanzamiento, simplemente fusione la rama de lanzamiento. Se creará el lanzamiento, se publicará el nuevo paquete y los documentos actualizados se implementarán en https://reactstrap.github.io/.

En la naturaleza

Organizaciones y proyectos utilizando reactstrap

• Airframe -React - Demo - Airframe proporciona todos los componentes que un desarrollador necesita para crear aplicaciones web intensivas en datos utilizando React.
• plantilla componente
• reaccionamiento de video
• Coreui-free-bootstrap-admin-semplate-demo
• Aplicación de ejemplo de tablero de administrador construida con reactStrap - demostración
• DeVextreme React Grid: es una cuadrícula de datos sin estado construida sobre reactstrap con las características de paginación, clasificación, filtrado, agrupación, selección, edición y desplazamiento virtual.
• DeVextreme React Chart: un gráfico construido sobre reactstrap que visualiza datos utilizando una variedad de tipos de series, que incluyen barra, línea, área, dispersión, pastel y más.
• reactStrap -scrollspy - demostración
• Formstrap - Demo - Deje que su componente de entrada reactstrap se integre a la perfección utilizando Formik
• Jimu UI - Demo - La Biblioteca UI para la plataforma de mapeo de Builder de ArcGIS Experience.

¡Envíe un PR para agregar a esta lista!

¿Busca construir, documentar y publicar componentes reutilizables construidos sobre reactstrap ? ¡Considere bifurgar https://github.com/reactstrap/component-template para iniciar su proyecto!