Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
http://mashmatrix.github.io/react-lightning-design-system/
Salesforce Lightning Design System components built with React
http://mashmatrix.github.io/react-lightning-design-system/
react salesforce salesforce-lightning
Last synced: 2 months ago
JSON representation
Salesforce Lightning Design System components built with React
- Host: GitHub
- URL: http://mashmatrix.github.io/react-lightning-design-system/
- Owner: mashmatrix
- License: other
- Created: 2015-08-25T16:59:50.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T23:40:40.000Z (3 months ago)
- Last Synced: 2024-04-14T09:16:09.898Z (3 months ago)
- Topics: react, salesforce, salesforce-lightning
- Language: TypeScript
- Homepage: https://mashmatrix.github.io/react-lightning-design-system/
- Size: 28.4 MB
- Stars: 255
- Watchers: 25
- Forks: 85
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-salesforce - React Components for Saleforce Lightning Design System - Salesforce Lightning Design System components built with React (UX Libraries for Salesforce / Open Source Projects Repositories from Salesforce)
- awesome-salesforce - React Components for Saleforce Lightning Design System - Salesforce Lightning Design System components built with React (UX Libraries for Salesforce / Open Source Projects Repositories from Salesforce)
README
# [React Lightning Design System](https://mashmatrix.github.io/react-lightning-design-system/)
[![Build Status](https://travis-ci.org/mashmatrix/react-lightning-design-system.svg?branch=master)](https://travis-ci.org/mashmatrix/react-lightning-design-system)[Salesforce Lightning Design System](http://www.lightningdesignsystem.com/) components built with React.
See the [demo](https://mashmatrix.github.io/react-lightning-design-system/).
## Install
```
$ npm install react-lightning-design-system
```## Example
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-lightning-design-system';function click() { alert('Clicked'); }
ReactDOM.render(
Simple
Neutral
Brand
Icon #1
Disabled Neutral
Disabled Brand
, document.body);
```See more examples in [examples](https://github.com/mashmatrix/react-lightning-design-system/tree/master/stories) 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](http://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](https://voice.kadira.io/snapshot-testing-in-react-storybook-43b3b71cec4f)