reactstrap

réagir

Composants de réaction apatrides pour bootstrap 5.

Si vous utilisez Bootstrap 4, vous devrez utiliser Reactsstrap V8

Commencer

Suivez les instructions Create-React-App pour commencer, puis suivez la version ReactsStrap de l'ajout de bootstrap.

tl; dr

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

ou, si npx (nœud> = 6 et npm> = 5.2) non disponible

 npm install -g create-react-app

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

Ensuite, ouvrez http: // localhost: 3000 / pour voir votre application. La structure initiale de votre application est configurée. Ensuite, ajoutons Reactsstrap et bootstrap.

Ajout de bootstrap

Installez ReagtsStrap et Bootstrap à partir de NPM. ReactsStrap n'inclut pas Bootstrap CSS, donc cela doit également être installé:

 npm i bootstrap
npm i reactstrap react react-dom

Importer Bootstrap CSS dans le fichier src/index.js :

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

Importez les composants Reactsstrap requis dans le fichier src/App.js ou vos fichiers de composants personnalisés:

 import { Button } from 'reactstrap' ;

Vous êtes maintenant prêt à utiliser les composants Reactsstrap importés dans votre hiérarchie de composants définie dans la méthode de rendu. Voici un exemple App.js refait à l'aide de ReactStrap.

Dépendances

Dépendances requises par les pairs

Ces bibliothèques ne sont pas regroupées avec ReactSTrap et requises au moment de l'exécution:

• réagir
• react-dom

À propos du projet

Cette bibliothèque contient des composants de bootstrap React qui favorisent la composition et le contrôle. La bibliothèque ne dépend pas de JQuery ou de Bootstrap JavaScript. Cependant, Poppers.js via React-Popper est invoqué pour le positionnement avancé de contenu comme les infractions, les popovers et les couvertures automatique.

Il y a quelques concepts de base à comprendre afin de tirer le meilleur parti de cette bibliothèque.

1. Votre contenu devrait être composé via des accessoires.

    // 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. Les attributs de cette bibliothèque sont utilisés pour passer à l'état, appliquer facilement les classes de modificateurs, activer les fonctionnalités avancées (comme l'attache) ou inclure automatiquement des éléments non contenant.

   Exemples:

   • isOpen - État actuel pour des éléments tels que Dropdown, Popover, Tools
   • toggle - Rappel pour le fait de basculer isOpen dans le composant de contrôle
   • color - Applique des classes de couleurs, ex: <Button color="danger"/>
   • size - pour contrôler les classes de taille. Ex: <Button size="sm"/>
   • tag - Personnaliser la sortie du composant en passant dans un nom ou un composant d'élément
   • Accessoires (attributs) basés à la booléenne lorsque cela est possible pour des classes de style alternatives ou un contenu visually-hidden

Documentation

https://reactsstrap.github.io

La recherche de documentation est alimentée par la recherche sur la recherche d'Algolia.

Exemples de codes et de boîte

Voici quelques exemples prêts à emporter pour les codes et la boîte à expérimenter.

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

Contributif

Développement

Installez les dépendances:

yarn install

Exécutez des exemples sur http: // localhost: 8080 / avec WebPack Dev Server:

yarn start

Exécuter les tests et le rapport de couverture:

yarn cover

Tests de surveillance:

yarn test 

Libération

Les branches de version / versioning / notes seront automatiquement créées et entretenues par l'action GitHub de publication. Lorsque vous êtes prêt à publier la version, fusionnez simplement la branche de la version. La version sera créée, le nouveau package sera publié et les documents mis à jour seront déployés sur https://reactsstrap.github.io/.

À l'état sauvage

Organisations et projets utilisant reactstrap

• Airframe-React - Demo - Airframe fournit tous les composants dont un développeur a besoin pour créer des applications Web à forte intensité de données à l'aide de React.
• composant-template
• réaction vidéo
• Coreui-libre-bootstrap-admin-template - démo - démo
• Application Exemple de tableau de bord d'administration Construit avec Reagtsstrap - Demo
• DevexTreme React Grid - Il s'agit d'une grille de données apatride construite sur reactstrap avec la pagination, le tri, le filtrage, le regroupement, la sélection, l'édition et les fonctionnalités de défilement virtuel.
• DevexTreme React Chart - un graphique construit sur reactstrap qui visualise les données en utilisant une variété de types de séries, y compris la barre, la ligne, la zone, la dispersion, la tarte, etc.
• réactsstrap-scrollspy - démo
• FormStrap - Demo - Laissez votre composant d'entrée reactstrap intégrer de manière transparente à l'aide Formik
• JIMU UI - Demo - La bibliothèque d'interface utilisateur pour la plate-forme de mappage du générateur d'expérience ArcGIS.

Soumettez un PR à ajouter à cette liste!

Vous cherchez à construire, documenter et publier des composants réutilisables construits sur reactstrap ? Pensez à forking https://github.com/reactsstrap/component-template pour lancer votre projet!