Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(react): update README #7130

Merged
merged 6 commits into from
Nov 17, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 44 additions & 48 deletions packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,76 +2,72 @@

> A collection of
> [Carbon Components](https://github.com/carbon-design-system/carbon/tree/master/packages/components)
> implemented using [React](https://reactjs.org/).
> built with [React](https://reactjs.org/).

### Getting Started
If you're new to React.js or Carbon, check out our
[guide](https://medium.com/carbondesign/up-running-with-carbon-react-in-less-than-5-minutes-25d43cca059e)
to help get you up and running.

Run the following command using [npm](https://www.npmjs.com/):
## Getting started

To install `carbon-components-react` in your project, you will need to run the
following command using [npm](https://www.npmjs.com/):

```bash
npm install -S carbon-components-react carbon-components carbon-icons
npm install -S carbon-components carbon-components-react carbon-icons
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add carbon-components-react carbon-components carbon-icons
yarn add carbon-components carbon-components-react carbon-icons
```

1. These components require the use of
[Webpack](http://webpack.github.io/docs/tutorials/getting-started/) in your
project. See our
[`webpack.config.js`](/packages/react/.storybook/webpack.config.js) for an
example configuration.

2. Components do not import any of the styles themselves, use the scss or css
from `carbon-components` to bring in styling. You can also use the `unpkg`
cdn to bring in the styles wholesale -
`unpkg.com/carbon-components/css/carbon-components.css` aliases the latest
css file.

3. For older browsers (e.g. IE11), polyfills listed in
[`carbon-components-react/.storybook/polyfills.js` file](./.storybook/polyfills.js)
is required.

If you only want to try out `carbon-components-react`, you can also use
If you want to try out `carbon-components-react`, you can also use
[CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox).

[![Edit carbon-components-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox)

## Usage

### List of Available Components

View available React Components [here](http://react.carbondesignsystem.com). You
can see usage information in several ways:

1. Clicking the blue **Show Info** icon in the top right corner of the selected
component. You can see the list of available React props
2. Clicking the **STORY** tab at the bottom. This tab contains the code that
shows how the component is being used
3. Clicking the **KNOBS** tab at the bottom and changing values there. Most
knobs are shown as something like `Button kind (kind)`, where `kind` is the
name of React prop
4. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the
selected component. You may see something like `onClick` which typically
indicates that the event handler (React prop) with the same name is called.
You can also expand the twistie to see the details of the event
5. Clicking the **README** tab at the bottom. You can see some more document for
some components
```js
import { Button } from 'carbon-components-react';

function MyComponent() {
return <Button>Example usage</Button>;
}
```

For more information about each component, check out our
[Storybook](https://react.carbondesignsystem.com). For guides on getting
started, head on over to our
[Website](https://www.carbondesignsystem.com/get-started/develop/react) or check
out our
[Tutorial](https://www.carbondesignsystem.com/developing/react-tutorial/overview/)

# :books: Documentation

- See our
[documentation site](https://www.carbondesignsystem.com/get-started/develop/react)
for full how-to docs and guidelines
- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions
to this repo
- [Storybook](https://react.carbondesignsystem.com)
- [Getting started](https://www.carbondesignsystem.com/get-started/develop/react)
- [🏃‍♀️ Migration Guides](./docs/migration)
- [v6 to v7](./docs/migration/migrate-to-7.x.md)

## Contributing
## 📚 Examples

If you're looking for more examples on how to use `carbon-components-react`, we
have some examples that you can check out:

- [Create React App](./examples/create-react-app)
- [Next.js](./examples/next)
- [React Router](./examples/react-router)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Please check out our [Contribution Guidelines](/.github/CONTRIBUTING.md) for
detailed information on how you can lend a hand.
Licensed under the [Apache 2.0 License](/LICENSE).