No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Don't

Component Customisation

We do not support any customisation of Carbon components as we cannot guarantee that the underlying DOM structure will not be changed in future releases.

Do

Component Composition

We recommend using composition instead of inheritance: this is also the approach suggested in React's documentation. Most Carbon components are now function components and can not be extended. If you have any difficulty with this approach approach please let us know via GitHub.

Wrapping Components

If you need to wrap the Carbon components to achieve some additional functionality it is important to note that some rely on their children being direct descendants. The reason for this is that some parent components iterate and clone their children applying different props depending on the index of a given child. You should also be aware that some of our components will have invalid HTML markup if you include a new element in the wrapping component.

If you find that a wrapped component no longer works or is not styled as you'd expect you may need to spread all the the props directly to them like shown below:

const ComponentWrapper = ({ customProp, ...rest }) => {
  // ...
  // some additional logic
  // ...
  return <Component {...rest} />;
};

It is also possible to achieve the same by using hooks if you prefer:

const useComponentHook = (customProp, rest) => {
  // ...
  // some additional logic
  // ...
  return <Component {...rest} />;
};