@cdssnc/gcds-components-react
Advanced tools
To make it easier to integrate GC Design System web components into React projects, the gcds-components-react package provides React wrappers.
These wrappers make it easier to work with web components in the React ecosystem. They offer JSX bindings for properties and custom events, auto-completion, and type safety.
The web components inherit native properties and interoperability.
You can find the full documentation for GC Design System Components on https://design-system.alpha.canada.ca/.
Follow these steps to install and use GC Design System components in your React project.
Navigate to your project’s root folder and run the following command:
npm install @cdssnc/gcds-components @cdssnc/gcds-components-react
Place the following code in the index.js file of your app to import GC Design System styles:
import '@cdssnc/gcds-components-react/gcds.css';
Once you've installed the design system, start building! Browse our available components and templates to pull the code you need into your project.
If you are interested in contributing to GC Design System Components, please read our contributing guidelines.
Code released under the MIT License.
Pour faciliter l’intégration des composants Web de Système de design GC dans les projets React, le paquet gcds-components-react propose différentes enveloppes React.
Ces enveloppes facilitent le travail avec les composants Web dans l’écosystème React. Elles offrent des liaisons JSX pour les propriétés et les événements personnalisés, la saisie automatique et la sécurité de type.
Les composants Web héritent les propriétés et l’interopérabilité natives.
Toute la documentation sur les composants de Système de design GC est accessible à l’adresse https://systeme-design.alpha.canada.ca/.
Suivez ces étapes pour installer et utiliser les composants de Système de design GC dans votre projet React.
Naviguez vers le dossier racine de votre projet et exécutez la commande suivante :
npm install @cdssnc/gcds-components @cdssnc/gcds-components-react
Pour importer les styles de Système de design GC, insérez le code suivant dans le fichier index.js de votre application :
import '@cdssnc/gcds-components-react/gcds.css';
Une fois le système de design installé, commencez à créer! Parcourez nos composants et modèles pour y trouver le code dont vous avez besoin pour votre projet.
Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos lignes directrices sur la contribution.
Code publié en vertu de la licence MIT (en anglais).
FAQs
React wrapper for gcds-components
The npm package @cdssnc/gcds-components-react receives a total of 214 weekly downloads. As such, @cdssnc/gcds-components-react popularity was classified as not popular.
We found that @cdssnc/gcds-components-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.