react-ldsReact LDS 
react-lds provides React components for the Salesforce Lightning Design System.
Installation
To install the stable version with npm, run:
npm install --save react react-dom moment moment-timezone moment-rangenpm install react-lds --saveUsage
react-lds exports components as modules. You can consume these via import in your own React components.
import React from 'react';
import { Badge } from 'react-lds';
const HelloWorld = props => (
<Badge theme="warning" label={props.message} />
);
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.
ES Modules
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.
// 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.
Context
In order to use ReactLDS, you will have to provide assetBasePath via the React Context.
import { Children, Component } from 'react';
import PropTypes from 'prop-types';
class AssetPathProvider extends Component {
getChildContext() {
return {
assetBasePath: 'assets/',
};
}
render() {
const { children } = this.props;
return (
<div>
{children}
</div>
);
}
}
AssetPathProvider.propTypes = {
children: PropTypes.node.isRequired,
};
AssetPathProvider.childContextTypes = {
assetBasePath: PropTypes.string,
};Development
yarn install and yarn start. Add or modify stories in ./stories Happy hacking!
Scaffold components
New components can be scaffolded with hygen templates. To add a component, run npx hygen component new --name Foo.
Developing while embedded into a react project
npm link in this folder. After you changed stuff, run npm build to update
the files inside the ./dist folder, because that's the entry point for
external react applications.
In your react app: npm link react-lds.
Publish
- Open a new pull request from
/release/{version} - Adjust version in
package.json - Write
CHANGELOG.md - 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.