How to use @carbon/elements - 10 common examples
To help you get started, we’ve selected a few @carbon/elements 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 / gatsby-theme-carbon / packages / gatsby-theme-carbon / src / components / Tabs / Tabs.js View on Github 
export const Tabs = props => {
const tabList = useRef([]);
const [activeTab, setActiveTab] = useState(0);
const isMobile = useMedia({ maxWidth: breakpoints.md.width });
const id = useId('tabs');
// clear tablist when unmounted (switching between Select and TabList)
useEffect(() => () => (tabList.current = []));
return (
{isMobile ? (
<select>{props.children}</select>
) : (
{props.children}
)}
{React.Children.map(props.children, (child, index) => {
if (elementIsNullOrString(child)) return child;import React from 'react';
import { settings } from 'carbon-components';
import classnames from 'classnames';
import { findKey, values } from 'lodash';
import {
baseFontSize,
breakpoints as carbonBreakpoints,
} from '@carbon/elements';
import { CodeSnippet } from 'carbon-components-react';
const { prefix } = settings;
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const defaultTypeValues = {
'letter-spacing': 0,
};
const TypesetExample = props => (
<div>
{(props.typeSet || []).map(type => {
const indexOfClosestLargerBreakpoint = Math.max(
0,
values(breakpoints).findIndex(
width => props.simulatedScreenWidth <= width</div>{
description: 'Display',
key: 'display-03',
name: 'display-03',
},
{
description: 'Display',
key: 'display-04',
name: 'display-04',
},
],
};
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const nextLargerBreakpointPx = viewportWidth =>
values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];
const indexOfCurrentBreakpoint = viewportWidth =>
findLastIndex(values(breakpoints), width => viewportWidth >= width);
const isWithinBreakpoint = (viewportWidth, currentBreakpoint) => {
if (viewportWidth === currentBreakpoint) return true;
return (
viewportWidth >= currentBreakpoint &&
viewportWidth < nextLargerBreakpointPx(currentBreakpoint)description: 'Display',
key: 'display-03',
name: 'display-03',
},
{
description: 'Display',
key: 'display-04',
name: 'display-04',
},
],
};
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const nextLargerBreakpointPx = viewportWidth =>
values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];
const indexOfCurrentBreakpoint = viewportWidth =>
findLastIndex(values(breakpoints), width => viewportWidth >= width);
const isWithinBreakpoint = (viewportWidth, currentBreakpoint) => {
if (viewportWidth === currentBreakpoint) return true;
return (
viewportWidth >= currentBreakpoint &&
viewportWidth < nextLargerBreakpointPx(currentBreakpoint)
);import React from 'react';
import { settings } from 'carbon-components';
import classnames from 'classnames';
import { findKey, values } from 'lodash';
import {
baseFontSize,
breakpoints as carbonBreakpoints,
} from '@carbon/elements';
import { CodeSnippet } from 'carbon-components-react';
const { prefix } = settings;
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const defaultTypeValues = {
'letter-spacing': 0,
};
const TypesetExample = props => (
<div>
{(props.typeSet || []).map(type => {
const indexOfClosestLargerBreakpoint = Math.max(
0,
values(breakpoints).findIndex(
width => props.simulatedScreenWidth <= width
)</div>name: 'display-03',
},
{
description: 'Display',
key: 'display-04',
name: 'display-04',
},
],
};
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const nextLargerBreakpointPx = viewportWidth =>
values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];
const indexOfCurrentBreakpoint = viewportWidth =>
findLastIndex(values(breakpoints), width => viewportWidth >= width);
const isWithinBreakpoint = (viewportWidth, currentBreakpoint) => {
if (viewportWidth === currentBreakpoint) return true;
return (
viewportWidth >= currentBreakpoint &&
viewportWidth < nextLargerBreakpointPx(currentBreakpoint)
);
};import classnames from 'classnames';
import { findKey, values } from 'lodash';
import {
baseFontSize,
breakpoints as carbonBreakpoints,
} from '@carbon/elements';
import { CodeSnippet } from 'carbon-components-react';
const { prefix } = settings;
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const defaultTypeValues = {
'letter-spacing': 0,
};
const TypesetExample = props => (
<div>
{(props.typeSet || []).map(type => {
const indexOfClosestLargerBreakpoint = Math.max(
0,
values(breakpoints).findIndex(
width => props.simulatedScreenWidth <= width
)
);
</div>import React from 'react';
import { settings } from 'carbon-components';
import classnames from 'classnames';
import { findKey, values } from 'lodash';
import {
baseFontSize,
breakpoints as carbonBreakpoints,
} from '@carbon/elements';
import { CodeSnippet } from 'carbon-components-react';
const { prefix } = settings;
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const defaultTypeValues = {
'letter-spacing': 0,
};
const TypesetExample = props => (
<div>
{(props.typeSet || []).map(type => {
const indexOfClosestLargerBreakpoint = Math.max(
0,
values(breakpoints).findIndex(</div>},
{
description: 'Display',
key: 'display-03',
name: 'display-03',
},
{
description: 'Display',
key: 'display-04',
name: 'display-04',
},
],
};
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const nextLargerBreakpointPx = viewportWidth =>
values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];
const indexOfCurrentBreakpoint = viewportWidth =>
findLastIndex(values(breakpoints), width => viewportWidth >= width);
const isWithinBreakpoint = (viewportWidth, currentBreakpoint) => {
if (viewportWidth === currentBreakpoint) return true;
return (
viewportWidth >= currentBreakpoint &&key: 'display-03',
name: 'display-03',
},
{
description: 'Display',
key: 'display-04',
name: 'display-04',
},
],
};
const breakpoints = {
sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};
const nextLargerBreakpointPx = viewportWidth =>
values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];
const indexOfCurrentBreakpoint = viewportWidth =>
findLastIndex(values(breakpoints), width => viewportWidth >= width);
const isWithinBreakpoint = (viewportWidth, currentBreakpoint) => {
if (viewportWidth === currentBreakpoint) return true;
return (
viewportWidth >= currentBreakpoint &&
viewportWidth < nextLargerBreakpointPx(currentBreakpoint)
);
};@carbon/elements
A collection of design elements in code for the IBM Design Language
