Watson Developer Cloud React Components
Carbon Design System.
DEPRECATED: this repo is no longer actively maintained. It can still be used as reference, but may contain outdated or unpatched code. If you are looking to build React UIs following IBM's design guidelines, please refer to theA collection of React components to write web applications using the Watson APIs.
Documentation: https://watson-developer-cloud.github.io/react-components/
Getting Started
-
Install the library
npm install --save watson-react-components
-
Add components to your React file where needed:
Example:
import { Header, Footer, /*...*/} from 'watson-react-components';
-
Make the assets public. For a Node.js/Express server, the following code should work:
app.use(express.static('./node_modules/watson-react-components/dist/'));
For other environments, check out the code and run
npm install; npm run build
and then copy the contents of thedist/
directory into your static folder. -
Add a reference to the stylesheet.
<link rel="stylesheet" type="text/css" href="/css/watson-react-components.min.css">
Adjust the
href
as necessary if a different location was chosen in step 3
How to Contribute
-
Install Dependencies
npm install
-
Start the development server
npm run dev
Changes will refresh the page thanks to browsersync.
-
Run the build command before pushing merge request:
npm run build
Directory structure
.
├── README.md
├── dist
│ ├── components // ES5 react components
│ ├── css
│ ├── images
│ ├── js
│ └── scss
├── example
│ ├── build
│ ├── index.html
│ └── src
├── gh-pages
│ ├── build
│ ├── images
│ ├── index.html
│ └── src
├── gulpfile.js
├── package.json
├── src
│ ├── components // React components
│ └── stylesheets // Sass files
└── static // static files
└── images // images
License
This sample code is licensed under Apache 2.0.
Contributing
See CONTRIBUTING.
Open Source @ IBM
Find more open source projects on the IBM Github Page