bhp-ui-react
v0.0.4
Published
BHP UI react library. A companion to [`bhp-ui`](https://github.com/BHP-DevHub/bhp-ui) for developers using React.
Downloads
4
Readme
BHP UI React
BHP UI react library. A companion to
bhp-ui
for developers using React.
Getting started
One option is to grab a copy of bhp-react-app, a basic starter prepared that includes this library and all its dependencies.
Otherwise, run
yarn add bhp-ui-react
to install this library. the required peer dependencies for the package
will be listed as warnings, so yarn add
those next.
You can now reference the library by importing from it, for example
import { BHPLogo } from 'bhp-ui-react';
// ...
export default () => (
<BHPLogo />
);
Using CSS
If your project is using CSS rather than SASS/SCSS, you will find precompiled
CSS files in css/index-light.css
and css/index-dark.css
, which you can
use directly in your React project with code like
import 'node_modules/bhp-ui-react/css/index-light.css';
You must add class="light-theme"
(or dark-theme
) to the root HTML object of
your project for these styles to work.
Using SCSS (recommended)
The SCSS is designed so that it can be included and extended within the context
of an active project. Two major entry points in scss/index-dark.scss
and
scss/index-light.scss
which may be sufficient for your needs, and which are
also provided as simple examples of how to use the SCSS.
If you want to customise the SCSS, you can create an scss
file in your
repository containing
@import '~bhp-ui/scss/themes/light';
@import '~bhp-ui-react/scss/0-root';
@import '~bhp-ui-react/scss/1-base';
.light-theme {
@import '~bhp-ui-react/scss/2-within-theme';
}
You must add class="light-theme"
(or dark-theme
) to the root HTML object of
your project for this to work, though you can omit this if you only intend to
support one theme, modifying the SCSS to remove the theme class qualifier:
@import '~bhp-ui/scss/themes/light';
@import '~bhp-ui-react/scss/0-root';
@import '~bhp-ui-react/scss/1-base';
@import '~bhp-ui-react/scss/2-within-theme';