Getting Started - React

Welcome

This getting started guide is intended for developers. See below for instructions on how to install Spark and bring it into your existing build.

Requirements

Spark's React implementation assumes a few things about your project.

  • We assume that your project is processing Sass rather than plain CSS for style information. More information for converting a React project to SCSS is available at facebook.github.io.

Spark

Getting Started

To get started with spark-react , you'll need to follow these steps:

  • Install the spark-core npm package.

    npm install --save-dev @sparkdesignsystem/spark-core
  • Install the spark-react npm package.

    npm install --save-dev @sparkdesignsystem/spark-react
  • Install the needed peer dependencies for our npm package. If your application does not have one of our peer dependencies then your console should show a warning for that missing dependency when you install spark-react .

  • Import the Sass setup file in your React application's global styles Sass file. This can be done in the scss file specified at the highest level of your app. This will bring all Spark-Core patterns into your build. The .scss file extension is needed in the case of React so as to not conflict with JS files.

    @import "node_modules/@sparkdesignsystem/spark-core/spark-core.scss";
  • Spark does not provide icons directly. What you see on our icons page are proprietary icons in use by Quicken Loans. To supply your own icon set, you need to import an svg that contains symbols for the ids referenced on the icon page. This symbol file should occur in the DOM before the first use element.

All Spark React components are included in the spark-react package. However, the following components rely on the vanilla Spark Extra packages:

  • Spark Card

    npm install --save-dev @sparkdesignsystem/spark-card

    Import the Sass file into your application. See section on Sass above for more details. This will bring all Spark-Card patterns into your build.

    @import "node_modules/@sparkdesignsystem/spark-card/_card.scss";
  • Spark Highlight Board

    npm install --save-dev @sparkdesignsystem/spark-highlight-board

    Import the Sass file into your application. See section on Sass above for more details. This will bring all Spark-Highlight-Board patterns into your build.

    @import "node_modules/@sparkdesignsystem/spark-highlight-board/_highlight-board.scss";
  • Spark Dictionary

    npm install --save-dev @sparkdesignsystem/spark-dictionary

    Import the Sass file into your application. See section on Sass above for more details. This will bring all Spark-Dictionary patterns into your build.

    @import "node_modules/@sparkdesignsystem/spark-dictionary/_dictionary.scss";

Using Components

To use a Spark React Component, it needs to be imported into your component js file using the following pattern:

import { ComponentName } from '@sparkdesignsystem/spark-react';

Browser Support

Spark supports the following browsers (current version and 1 prior):

  • Google Chrome
  • Google Chrome (Mobile)
  • Mozilla Firefox
  • Mozilla Firefox (Mobile)
  • Microsoft Edge
  • Apple Safari
  • Apple Safari (Mobile)

Spark also supports the following:

  • Microsoft Internet Explorer 11

Change Workflow and Contribution Guide

If you are interested in contributing to Spark, please read our full change workflow and contribution guide to get started.