How to use carbon-components-react - 9 common examples
To help you get started, we’ve selected a few carbon-components-react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
carbon-design-system / carbon / packages / react / scripts / rollup.config.js View on Github 
generateBundle(options, bundle) {
const gzipSize = gzip.sync(
bundle['carbon-components-react.min.js'].code
);
const { bundleSizeThreshold } = packageJson;
console.log('Total size (gzipped):', gzipSize); // eslint-disable-line no-console
if (gzipSize > bundleSizeThreshold) {
throw new RangeError(
`Exceeded size threshold of ${bundleSizeThreshold} bytes (gzipped)!`
);
}
},
},generateBundle(options, bundle) {
const gzipSize = gzip.sync(
bundle['carbon-components-react.min.js'].code
);
const { bundleSizeThreshold } = packageJson;
console.log('Total size (gzipped):', gzipSize); // eslint-disable-line no-console
if (gzipSize > bundleSizeThreshold) {
throw new RangeError(
`Exceeded size threshold of ${bundleSizeThreshold} bytes (gzipped)!`
);
}
},
},case 'carbon.table.batch.items.selected':
return `${state.totalSelected} ${itemsSelected}`;
case 'carbon.table.batch.item.selected':
return `${state.totalSelected} ${itemSelected}`;
case 'carbon.table.toolbar.search.label':
return i18n.searchLabel;
case 'carbon.table.toolbar.search.placeholder':
return i18n.searchPlaceholder;
case 'carbon.table.header.icon.description':
if (state.isSortHeader) {
// When transitioning, we know that the sequence of states is as follows:
// NONE -> ASC -> DESC -> NONE
if (state.sortDirection === sortStates.NONE) {
return i18n.filterAscending;
}
if (state.sortDirection === sortStates.ASC) {
return i18n.filterDescending;
}
return i18n.filterNone;
}
return i18n.filterAscending;
default:
return '';
}
};switch (id) {
case 'carbon.table.batch.cancel':
return batchCancel;
case 'carbon.table.batch.items.selected':
return `${state.totalSelected} ${itemsSelected}`;
case 'carbon.table.batch.item.selected':
return `${state.totalSelected} ${itemSelected}`;
case 'carbon.table.toolbar.search.label':
return i18n.searchLabel;
case 'carbon.table.toolbar.search.placeholder':
return i18n.searchPlaceholder;
case 'carbon.table.header.icon.description':
if (state.isSortHeader) {
// When transitioning, we know that the sequence of states is as follows:
// NONE -> ASC -> DESC -> NONE
if (state.sortDirection === sortStates.NONE) {
return i18n.filterAscending;
}
if (state.sortDirection === sortStates.ASC) {
return i18n.filterDescending;
}
return i18n.filterNone;
}
return i18n.filterAscending;
default:
return '';
}
};onChange={() => {}}
placeholder="Filter"
/>,
this.comp
);
} else if (this.props.variation === 'MultiSelect') {
ReactDOM.render(
(item ? item.text : '')}
label="MultiSelect Label"
/>,
this.comp
);
} else if (this.props.variation === 'MultiSelect.Inline') {
NewComponent = reactComponent.MultiSelect;
ReactDOM.render(
(item ? item.text : '')}
label="MultiSelect Label"
type="inline"
/>,
this.comp
);
}
};addReactComponent = () => {
let NewComponent = reactComponent[this.props.component];
if (this.props.component === 'ComboBox') {
ReactDOM.render(
(item ? item.text : '')}
placeholder="Filter..."
/>,
this.comp
);
} else if (this.props.variation === 'MultiSelect.Filterable') {
NewComponent = reactComponent.MultiSelect.Filterable;
ReactDOM.render(
(item ? item.text : '')}
onChange={() => {}}
placeholder="Filter"
/>,
this.comp
);
} else if (
this.props.variation === 'Dropdown' ||
this.props.variation === 'MultiSelect'
) {
ReactDOM.render(addReactComponent = () => {
let NewComponent = reactComponent[this.props.component];
if (this.props.component === 'ComboBox') {
ReactDOM.render(
(item ? item.text : '')}
placeholder="Filter..."
/>,
this.comp
);
} else if (this.props.variation === 'MultiSelect.Filterable') {
NewComponent = reactComponent.MultiSelect.Filterable;
ReactDOM.render(
(item ? item.text : '')}
onChange={() => {}}
placeholder="Filter"
/>,
this.comp
);
} else if (this.props.variation === 'MultiSelect') {
ReactDOM.render(
(item ? item.text : '')}
label="MultiSelect Label"
/>,}
}
`;
const propTypes = {
/** Show loading spinner, only new prop */
loading: PropTypes.bool,
/** Disable the button will be auto disabled when loading */
disabled: PropTypes.bool,
/** Button label */
children: PropTypes.node.isRequired,
/** click handler */
onClick: PropTypes.func.isRequired,
className: PropTypes.string,
/** primary, secondary, etc from carbon */
kind: ButtonTypes.buttonKind,
};
const defaultProps = {
loading: false,
disabled: false,
className: null,
kind: 'primary',
};
/**
* Carbon button with added ability to show loading state
*/
const ButtonEnhanced = props => {
const { children, loading, disabled, className, ...other } = props;
return (
PropTypes.node,
]),
afterContent: PropTypes.node,
thumbnail: PropTypes.node,
href: PropTypes.string,
})
),
})
).isRequired,
classNameGalleryItem: PropTypes.string,
/** Is button disabled */
isButtonDisabled: PropTypes.bool,
/** Custom className for Button component */
buttonClassName: PropTypes.string,
/** Button kind */
buttonKind: ButtonTypes.buttonKind,
/** Button content */
buttonText: PropTypes.string,
};
const defaultProps = {
description: null,
hasSearch: false,
hasSwitcher: false,
hasButton: false,
i18n: {
searchIconDescription: 'Search',
searchPlaceHolderText: 'Search for something',
searchCloseButtonText: 'Clear search',
listText: 'List',
gridText: 'Grid',
arrowIconDescription: 'Expand/Collapse',carbon-components-react
The Carbon Design System is IBM’s open-source design system for products and experiences.
