Skip to Main Content

Installing Spark in a React Project

This guide walks you through installing and using Spark on an existing React app.

For help with setting up the necessary development environment, see the React App Getting Started Guide.

By the end of this guide, you’ll have Spark set up on your project and have access to all of our components.

Our starter app examples are available for reference:

Installing Sass

Sass is a tool that processes and compiles CSS. You’ll need to use Sass to import Spark styles into your site.
  1. Run this command to install Sass:
npm install node-sass --save-dev
  1. Rename App.css to App.scss
  2. In App.js, update the import line to point at the new filename.
import './App.scss'
  1. Create a new file in src called styles.scss and copy this CSS into it:
body {
  border: 50px solid pink;
}
  1. In App.scss, import this new file:
@import './styles.scss';

If your React server has stopped, restart it now and view your compiled React site. You should see the new CSS you’ve written included in the site, along with the original React CSS:

Screenshot of Create React App running in a browser.

Install Spark Packages

Now we’ll use Sass to import all the Spark CSS.

  1. Install the Spark React package. It contains all of the Spark React components and Sass styles needed to build with Spark.
npm install @sparkdesignsystem/spark-react --save-dev
  1. Import the Spark Sass file into the main Sass file (e.g., App.scss).
@import "../node_modules/@sparkdesignsystem/spark-styles/spark.scss";

When you build and run your website, all the Spark CSS will now be bundled into your output. You can verify this by inspecting your site’s DOM and looking for the Spark CSS. There should be a <style> tag in the <head> of your page that includes Spark’s styles.

Screenshot of DOM with Spark Styles
If Spark React is installed correctly, you should see these CSS rules listed in your page’s code.

Adding Your First Spark Component

Adding a Spinner Button can confirm you've installed Spark React packages correctly.

This is just one example to implement functionality to get your project started.

Rewrite App.js to into a class component and prepare SprkButton to render a SprkSpinner on click.

import React from 'react';
import './App.scss';
import { SprkButton, SprkSpinner } from '@sparkdesignsystem/spark-react';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isAppLoading: false};
  }
  render() {
    return (
      <SprkButton
        isSpinning={this.state.isAppLoading}
        onClick={() => { this.setState({ isAppLoading: true }) }}
      >
        {this.state.isAppLoading ? <SprkSpinner /> :'Start Spinning'}
      </SprkButton>
    );
  }
}
export default App;

This code sample has:

  • An import of the React package.
  • A reference to your App.scss file.
  • An import of SprkButton and SprkSpinner.
  • State that will handle the status of isSpinning, and render the SprkSpinner when true (for this example, we'll name it isAppLoading).
  • SprkButton that sets isAppLoading to true after clicking.
  • Logic inside of SprkButton that renders the SprkSpinner according to isAppLoading state.

Now, you should find a Spark Button that loads a Spinner on click!

Screenshot of React App with Spark Button

Learn more about SprkButton and SprkSpinner functionality in the Button Storybook documentation.

Finding the code to other Spark Components

  1. Go to the Spark React Storybook.
  2. Find the Component you need in the "Components" section.
  3. Navigate to the Docs tab. It's typically at the top of screen next to Canvas.
  4. Navigate down the page until you find your component variant.
  5. The Show code button will toggle a code sample.

These code samples represent the final rendered state of the components. Just like with a SprkButton with a spinner, some functionality requires additional engineering.

The Docs section of each page will give implementation details for each component.

Additional Topics

Check out these guides for more information on setting up Spark: