Getting Started React

Setting up a project

First initialize a new Vite React project:

npm create vite@latest my-react-app -- --template react

Or if your team decides on using Typescript, input the following code into your editor:

npm create vite@latest my-react-app -- --template react-ts

Install React package

The next step is to install the dependencies. Run the following code in order to do so:

npm install @migov/digital-guidelines-core-react

Import CSS

When complete, open your editor and navigate to App.css, and import the Digital Guidelines CSS:

@import "@migov/digital-guidelines-core/dist/digital-guidelines-core/digital-guidelines-core.css";

Copy assets

Along with components, local assets, such as icons, need to be copied into your project so that they're available for bundling once you finish building your React application.

The assets in NPM project are located at @migov/digital-guidelines-core/dist/digital-guidelines-core/assets, and should be copied to your public assets folder.

We recommend using copyfiles npm package to copy the assets over:

copyfiles --up 5 "node_modules/@migov/digital-guidelines-core/dist/digital-guidelines-core/assets/**/*" public

Copyfiles can be run on any operating system, so there's no risk of running into any issues whether you're using a Mac or a PC.

Another way to copy the assets is to add scripts to your package.json file. For example:

"prebuild": "npm run copy:assets",
"copy:assets": "copyfiles --up 5 "node_modules/@migov/digital-guidelines-core/dist/digital-guidelines-core/assets/**/*" public"

Icons

To ensure icons are linked correctly, you will need to call a utility setAssetPath() function within your App.js to set the root path to your local icon assets.

import { setAssetPath } from "@migov/digital-guidelines-core/components";

  export default function App() {
    setAssetPath(window.location.origin)

    // your code here
  }
}

Usage

Once you've finished coping assets over, components can be used within your application by using the following code:

import React, { useState } from "react";
import { SomButton, SomInput } from "@migov/digital-guidelines-core-react";

export default function SomComponent() {
  const [name, setName] = useState('');
  const [count, setCount] = useState(0);

  const handleNameChange = (e) => setName(e.target.value);
  const increment = () => setCount(count + 1);

  return (
    <>
      <SomInput
        label="Your name"
        value={name}
        onSomInput={handleNameChange}
      />
      <p>{name}</p>

      <SomButton color="primary" onClick={increment}>
        Count: {count}
      </SomButton>
    </>
  )
}