Salesforce Lightning Design System components built with React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
public
src/scripts
stories
test
.babelrc
.editorconfig
.eslintrc
.gitattributes
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json change ver to 2.5.7 Jan 4, 2018
yarn.lock

README.md

React Lightning Design System

Build Status

Salesforce Lightning Design System components built with React.

See the demo.

Install

$ npm install react-lightning-design-system

Example

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-lightning-design-system';

function click() { alert('Clicked'); }

ReactDOM.render(
  <div>
    <Button onClick={ click }>Simple</Button>
    <Button type='neutral' onClick={ click }>Neutral</Button>
    <Button type='brand' onClick={ click }>Brand</Button>
    <Button type='neutral' icon='download' iconAlign='left' onClick={ click }>Icon #1</Button>
    <Button type='neutral' disabled>Disabled Neutral</Button>
    <Button type='brand' disabled>Disabled Brand</Button>
  </div>
, document.body);

See more examples in examples directory.

Running example stories locally

This repo ships with a react storybook based story scripts. To run stories and get component examples, follow these steps:

  1. run npm install
  2. run npm run storybook
  3. Find the stories running on localhost:9001.

Snapshot testing in react storybook

This repo ships with story snapshots to examine differences in rendering as a result of changes to source code.

To identify render differences run npm run test:storyshots. If all changes are intentional run npm run test:storyshots -- -u. To learn about other run options including interactive mode, read Snapshot Testing in React Storybook