Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/watson-developer-cloud/react-components
DEPRECATED: this repo is no longer actively maintained
https://github.com/watson-developer-cloud/react-components
Last synced: 3 days ago
JSON representation
DEPRECATED: this repo is no longer actively maintained
- Host: GitHub
- URL: https://github.com/watson-developer-cloud/react-components
- Owner: watson-developer-cloud
- Created: 2016-09-21T20:38:34.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T20:53:15.000Z (almost 2 years ago)
- Last Synced: 2024-09-15T23:18:36.085Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 4.54 MB
- Stars: 31
- Watchers: 2
- Forks: 29
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
Awesome Lists containing this project
README
# Watson Developer Cloud React Components
## 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 the [Carbon Design System](https://github.com/carbon-design-system/carbon).
[](https://travis-ci.org/watson-developer-cloud/react-components)
[](https://www.npmjs.com/package/watson-react-components)
A collection of [React](https://facebook.github.io/react/) components to write web applications using the Watson APIs.
Documentation: https://watson-developer-cloud.github.io/react-components/
## Getting Started
1. Install the library
```
npm install --save watson-react-components
```
2. Add components to your React file where needed:
Example:
```js
import { Header, Footer, /*...*/} from 'watson-react-components';
```
3. Make the assets public. For a Node.js/Express server, the following code should work:
```js
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 the `dist/` directory into your static folder.
4. Add a reference to the stylesheet.
```html
```
Adjust the `href` as necessary if a different location was chosen in step 3
## How to Contribute
1. Install Dependencies
```
npm install
```
2. Start the development server
```
npm run dev
```
Changes will refresh the page thanks to [browsersync](https://www.browsersync.io).
3. 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](.github/CONTRIBUTING.md).
## Open Source @ IBM
Find more open source projects on the [IBM Github Page](http://ibm.github.io/)