Salesforce Lightning Design System React Components
npm install react-ldsreact-lds provides React components for the Salesforce Lightning Design System.
To install the stable version with npm, run:
`` bash`
npm install --save react react-dom moment moment-timezone moment-range
` bash`
npm install react-lds --save
react-lds exports components as modules. You can consume these via import in your own React components.
` js
import React from 'react';
import { Badge } from 'react-lds';
const HelloWorld = props => (
);
`
Head over to the Storybook Docs to see a list of available components and their usage as well as interactive sample implementations of each component.
By default, react-lds transpiles to commonJS modules. You can import ES modules directly by importing components from react-lds/es. This enables tree-shaking when using Webpack or similiar bundlers.
` js`
// CommonJS import (Supported browsers: IE11+, last 2 versions)
import { Badge } from 'react-lds';
// ES import (Supported browsers: last 2 versions)
import { Badge } from 'react-lds/es';
⚠ Do not mix imports from react-lds and react-lds/es in your codebase. This will duplicate code.
In order to use ReactLDS, you will have to provide assetBasePath via the React Context.
` js
import { Children, Component } from 'react';
import PropTypes from 'prop-types';
class AssetPathProvider extends Component {
getChildContext() {
return {
assetBasePath: 'assets/',
};
}
render() {
const { children } = this.props;
return (
AssetPathProvider.propTypes = {
children: PropTypes.node.isRequired,
};
AssetPathProvider.childContextTypes = {
assetBasePath: PropTypes.string,
};
`
yarn install and yarn start. Add or modify stories in ./stories Happy hacking!
New components can be scaffolded with hygen templates. To add a component, run npx hygen component new --name Foo.
npm link in this folder. After you changed stuff, run npm build to update./dist
the files inside the folder, because that's the entry point for
external react applications.
In your react app: npm link react-lds.
- Open a new pull request from /release/{version}
- Adjust version in
- Write
- Merge into master and add a new tag. Travis will do the rest
react-lds started as a Propertybase project in 2016 and was maintained by Propertybase between 2016-2020.