To help you get started, we've collected the most common ways that @salesforce/design-system-react is being used within popular public projects.

SFDO-Tooling / MetaCI / src / js / index.tsx View on Github

);

    // Get JS globals
    let GLOBALS = {};
    try {
      const globalsEl = document.getElementById('js-globals');
      if (globalsEl) {
        GLOBALS = JSON.parse(globalsEl.textContent);
      }
    } catch (err) {
      logError(err);
    }
    window.GLOBALS = GLOBALS;

    // Set App element (used for react-SLDS modals)
    settings.setAppElement(el);

    ReactDOM.render(
      
        
          
            
          
        
      ,
      el,

View more ways to use @salesforce/design-system-react

Design System for React

Accessible, localization-friendly, presentational React components

Install

$ npm install @salesforce-ux/design-system @salesforce/design-system-react

Getting Started

Welcome to the project! 👋 This library is the React implementation of the Salesforce Lightning Design System. This library has a peer dependency on @salesforce-ux/design-system, react, and react-dom.

• Getting Started
• Documentation and interactive examples

Quick Setup (CommonJS)

A CommonJS-compatible version has been included within the NPM package to allows usage without transpiling. Use the following named import syntax to access CommonJS components from /lib/index.js:

import { Button } from '@salesforce/design-system-react';

<button label="Hello Button">

Recommended Usage (ES6 modules)

Recommended usage requires that your babel presets are set up correctly. create-react-app and environments that do not transpile code within node_modules are not compatible with the component import below. All the examples on the documentation site use this syntax. You can use the Babel preset, @salesforce/babel-preset-design-system-react, to get started. This preset will keep Babel compatible with Design System React and allow ES6 module benefits such as tree-shaking.

import Button from '@salesforce/design-system-react/components/button';

</button><button label="Hello Button">

Transpile with .babelrc settings

{
  "presets": ["@salesforce/babel-preset-design-system-react"]
}

Licenses

• Source code is licensed under BSD 3-Clause
• All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0
• The Salesforce Sans font is licensed under our font license

Got feedback?

If you have support questions, please post a question to StackOverflow and tag with design-system-react. If you find any bugs, create a GitHub Issue.