react-lds
v9.1.1
Published
Salesforce Lightning Design System React Components
Downloads
114
Maintainers
Readme
React 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-range
npm install react-lds --save
Usage
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.