@bandwidth/shared-components

bandwidth-shared-components

Shared Component Library for Bandwidth React Apps

V6 Is Out!

SCL V6 improves greatly on overall user experience, providing more consistency across components and more reliability for some complex experiences like pop-overs and Select.

We hope the new changes lead to a more seamless development experience and make the migration worth it! Read the full changelog

We will still be supporting V5 for a little while as we make the migration for projects at Bandwidth. You can still find the V5 docs here.

Documentation

How to use this library

Install the library as an NPM module. npm i --save @bandwidth/shared-components styled-components

styled-components is a peer dependency and required for usage

Add the BandwidthProvider to the root of your React component structure:

import { BandwidthProvider } from '@bandwidth/shared-components';

...

<BandwidthProvider>
  <MyApp />
</BandwidthProvider>

Now you can start including the components in your code. Require them by name from the module root:

import { Button } from '@bandwidth/shared-components'`;

Loading Fonts

As of v6.x, this library no longer loads fonts for you. You must include them in your project yourself.

For your convenience, we've provided a fonts/fonts.css file in the NPM package. You can use it to quickly bootstrap both our brand font (Overpass) and icon font. For instance, if you're using Webpack, you can do:

import '@bandwidth/shared-components/fonts/fonts.css';

anywhere in your project to load the fonts automatically.

Other project types will need to determine how to include the appropriate font files. We provide our icon font files in the /fonts directory, which you may copy as needed. You can get Overpass from Google Fonts.

Developing

To develop locally, run npm run start. The docs should then be available at http://localhost:6060. Live reloading, etc should work as well. Alternatively, you can develop against Storybook by running npm run storybook and visiting http://localhost:9001.

Please refer to the contributing guide and read through the pull request template before submitting a PR!

Publishing the Docs

Our docs live on the gh-pages branch. Publishing them is easy - just run the npm run deploy command. It will manage switching branches, copying files and pushing for you.

License

The source of this library is licensed under the MIT license (see LICENSE)

Bandwidth and the BW logo are trademarks of Bandwidth.com, Inc. Bandwidth reserves all rights to these trademarks, as well as any others that may be included from time to time.