npm package: @gcds-core/components-react
Description: React wrapper for gcds-components
Author: Government of Canada / Gouvernement du Canada
Latest version: 1.1.0

[La version française suit.](#composants-de-système-de-design-gc--react)

# GC Design System Components – React

To make it easier to integrate [GC Design System web components](../web/README.md) into React projects, the [@gcds-core/components-react](https://www.npmjs.com/package/@gcds-core/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.

## Documentation

You can find the full documentation for GC Design System Components on [https://design-system.canada.ca/](https://design-system.canada.ca/).

## React installation instructions

Follow these steps to install and use GC Design System components in your React project.

### 1. Install the package

Navigate to your project’s root folder and run the following command:

```js
npm install @gcds-core/components @gcds-core/components-react
```

### 2. Import GC Design System

Place the following code in the `index.js` file of your app to import GC Design System styles:

```jsx
import '@gcds-core/components-react/gcds.css';
```

### 3. Start building

Once you've installed the design system, start building! Browse our available [components](https://design-system.canada.ca/en/components/) and [templates](https://design-system.canada.ca/en/page-templates/) to pull the code you need into your project.

## How to contribute

If you are interested in contributing to GC Design System Components, please read our [contributing guidelines](https://github.com/cds-snc/gcds-components/blob/main/CONTRIBUTING.md).

## License

Code released under the [MIT License](https://github.com/cds-snc/gcds-components/blob/main/LICENSE).

---

# Composants de Système de design GC — React

Pour faciliter l’intégration des [composants Web de Système de design GC](../web/README.md) dans les projets React, le paquet [@gcds-core/components-react](https://www.npmjs.com/package/@gcds-core/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.

## Documentation

Toute la documentation sur les composants de Système de design GC est accessible à l’adresse [https://systeme-design.canada.ca/](https://systeme-design.canada.ca/).

## Instructions d’installation dans React

Suivez ces étapes pour installer et utiliser les composants de Système de design GC dans votre projet React.

### 1. Installer le paquet

Naviguez vers le dossier racine de votre projet et exécutez la commande suivante :

```js
npm install @gcds-core/components @gcds-core/components-react
```

### 2. Importer Système de design GC

Pour importer les styles de Système de design GC, insérez le code suivant dans le fichier `index.js` de votre application :

```jsx
import '@gcds-core/components-react/gcds.css';
```

### 3. Commencez à créer

Une fois le système de design installé, commencez à créer! Parcourez nos [composants](https://systeme-design.canada.ca/fr/composants/) et [modèles](https://systeme-design.canada.ca/fr/modeles-de-page/) pour y trouver le code dont vous avez besoin pour votre projet.

## Apportez votre contribution

Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos [lignes directrices sur la contribution](https://github.com/cds-snc/gcds-components/blob/main/CONTRIBUTING.md).

## Licence

Code publié en vertu de la [licence MIT](https://github.com/cds-snc/gcds-components/blob/main/LICENSE) (en anglais).