Giter VIP home page Giter VIP logo

carbon-components-react's Introduction

Carbon Components React

CircleCI All Contributors Greenkeeper badge

A collection of Carbon Components implemented using React.

Usage

List of Available Components

View available React Components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.

Getting Started

Run the following command using npm:

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

If you prefer Yarn, use the following command instead:

yarn add carbon-components-react carbon-components carbon-icons
  1. These components require the use of Webpack in your project. See our 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 is required.

If you just want to try out carbon-components-react, you can also use CodeSandbox.

Edit carbon-components-react

Development

Please refer to the Contribution Guidelines before starting any work.

Using the server

We recommend the use of React Storybook for developing components.

  1. (Optional) Set environment variables:

    • true to CARBON_USE_EXPERIMENTAL_FEATURES environment variable to test some of the experimental features:

      $ export CARBON_USE_EXPERIMENTAL_FEATURES=true
      
    • true to CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS environment variable to use external CSS, making style source link usable in DOM inspector:

      $ export CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=true
      
    • true to CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP environment variable to use Sass source map, making style source link point to the original Sass code:

      $ export CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true
      

Caveats:

  • CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=true and CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true make WebPack builds slightly slower.
  • With CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true, the source map (hitting style source link in DOM inspector) sometimes leads you to a mix-in, instead of a style rule calling the mix-in, which may get you lost.
  1. Start the server:

    $ yarn storybook
    
  2. Open browser to http://localhost:9000/.

  3. Develop components in their respective folders (/components or /internal).

  4. Write stories for your components in /.storybook.

Contributing

Please check out our Contribution Guidelines for detailed information on how you can lend a hand.

To update the Contributors section, follow these instructions

Contributors

Thanks goes to these wonderful people:


Brian Han

πŸ’»

Chris Dhanaraj

πŸ’»

Nick Sandonato

πŸ’»

TJ Egan

πŸ’»

Mari Johannessen

πŸ’»

Sam Doyle

πŸ’»

alex weidner

πŸ’»

Ciaran Hannigan

πŸ’»

Ian Fleming

πŸ’»

Eddie Monge

πŸ’»

Reinaldo Cruz

πŸ’»

Yu Cao

πŸ’»

Megan Becvarik

πŸ’»

Astha

πŸ’»

Jason Lengstorf

πŸ’»

Nathan Friedly

πŸ’»

Matt Hamann

πŸ’»

Greg

πŸ’»

Anthony Oliveri

πŸ’»

Jorge Padilla

πŸ’»

German Attanasio

πŸ’»

Ritchie Martori

πŸ’»

Akira Sudoh

πŸ’»

holmansze

πŸ’»

Josh Black

πŸ’» πŸ“– πŸ’‘ πŸš‡

Tayler Aitken

🎨 πŸ“–

Bethany Sonefeld

🎨

Dmitri Wolf

πŸ’»

James

πŸ’»

Kade Keith

πŸ’»

Mira Murali

πŸ’»

alisonemiller

πŸ’»

bjones526

πŸ’»

sandhya-r-reddy

πŸ’»

Alison Joseph

πŸ’»

Dogukan

πŸ’»

Erika Dsouza

πŸ’»

Jeroen Schaftenaar

πŸ’»

Joseph Meis

πŸ’»

Paul Sachs

πŸ’»

Ryan Mackey

πŸ’»

Toni

πŸ’»

shyfruan

πŸ’»

Joseph Gordon

πŸ’»

Logan McCaul

πŸ’»

Matt Chapman

πŸ’»

Scott Dickerson

πŸ’»

DarΓ­o HereΓ±ΓΊ

πŸ’»

James Zhang

πŸ’»

Simone Riccardelli

πŸ’»

Tom

πŸ’»

Zeus Courtois

πŸ’»

Andrew Daniel

πŸ› πŸ’»

Andy

πŸ› πŸ’»

Nicholas Lee

πŸ’»

David Menendez

πŸ’»

Prashant Farkya

πŸ’»

Tibor Cz

πŸ“–

Xixiang Chen

πŸ’»

s100

πŸ’»

Becca Ellsworth

πŸ’»

Zack Grossbart

πŸ’»

Yohanna Gadelrab

πŸ’» πŸ› ⚠️ πŸ“–

Carlos Eduardo Monti

πŸ’» πŸ“–

Thomas Brown

πŸ’»

carbon-components-react's People

Contributors

aeweidne avatar alisonjoseph avatar asfordmatt avatar astha-jain avatar asudoh avatar ciaranhannigan avatar eddiemonge avatar emyarod avatar greenkeeper[bot] avatar hellobrian avatar iangfleming avatar jamesvclements avatar jendowns avatar jlengstorf avatar joshblack avatar lekterable avatar loganmccaul avatar lovemecomputer avatar marijohannessen avatar mbecvarik avatar nsand avatar okstaticzero avatar reicruz avatar rezak-otmani avatar ryanomackey avatar sam1463 avatar scottdickerson avatar tw15egan avatar vpicone avatar zgrossbart avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.