1. Advisor
  2. @carbon/elements
  3. @carbon/elements code examples
View all @carbon/elements analysis

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.

github carbon-design-system / gatsby-theme-carbon / packages / gatsby-theme-carbon / src / components / Tabs / Tabs.js View on Github external
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) =&gt; {
        if (elementIsNullOrString(child)) return child;
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetExample.js View on Github external
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 =&gt; (
  <div>
    {(props.typeSet || []).map(type =&gt; {
      const indexOfClosestLargerBreakpoint = Math.max(
        0,
        values(breakpoints).findIndex(
          width =&gt; props.simulatedScreenWidth &lt;= width</div>
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetStyle.js View on Github external
{
      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 =&gt;
  values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];

const indexOfCurrentBreakpoint = viewportWidth =&gt;
  findLastIndex(values(breakpoints), width =&gt; viewportWidth &gt;= width);

const isWithinBreakpoint = (viewportWidth, currentBreakpoint) =&gt; {
  if (viewportWidth === currentBreakpoint) return true;
  return (
    viewportWidth &gt;= currentBreakpoint &amp;&amp;
    viewportWidth &lt; nextLargerBreakpointPx(currentBreakpoint)
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetStyle.js View on Github external
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 =&gt;
  values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];

const indexOfCurrentBreakpoint = viewportWidth =&gt;
  findLastIndex(values(breakpoints), width =&gt; viewportWidth &gt;= width);

const isWithinBreakpoint = (viewportWidth, currentBreakpoint) =&gt; {
  if (viewportWidth === currentBreakpoint) return true;
  return (
    viewportWidth &gt;= currentBreakpoint &amp;&amp;
    viewportWidth &lt; nextLargerBreakpointPx(currentBreakpoint)
  );
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetExample.js View on Github external
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 =&gt; (
  <div>
    {(props.typeSet || []).map(type =&gt; {
      const indexOfClosestLargerBreakpoint = Math.max(
        0,
        values(breakpoints).findIndex(
          width =&gt; props.simulatedScreenWidth &lt;= width
        )</div>
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetStyle.js View on Github external
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 =&gt;
  values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];

const indexOfCurrentBreakpoint = viewportWidth =&gt;
  findLastIndex(values(breakpoints), width =&gt; viewportWidth &gt;= width);

const isWithinBreakpoint = (viewportWidth, currentBreakpoint) =&gt; {
  if (viewportWidth === currentBreakpoint) return true;
  return (
    viewportWidth &gt;= currentBreakpoint &amp;&amp;
    viewportWidth &lt; nextLargerBreakpointPx(currentBreakpoint)
  );
};
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetExample.js View on Github external
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 =&gt; (
  <div>
    {(props.typeSet || []).map(type =&gt; {
      const indexOfClosestLargerBreakpoint = Math.max(
        0,
        values(breakpoints).findIndex(
          width =&gt; props.simulatedScreenWidth &lt;= width
        )
      );
</div>
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetExample.js View on Github external
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 =&gt; (
  <div>
    {(props.typeSet || []).map(type =&gt; {
      const indexOfClosestLargerBreakpoint = Math.max(
        0,
        values(breakpoints).findIndex(</div>
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetStyle.js View on Github external
},
    {
      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 &&
github carbon-design-system / carbon-website / src / components / TypesetStyle / TypesetStyle.js View on Github external
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 =&gt;
  values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];

const indexOfCurrentBreakpoint = viewportWidth =&gt;
  findLastIndex(values(breakpoints), width =&gt; viewportWidth &gt;= width);

const isWithinBreakpoint = (viewportWidth, currentBreakpoint) =&gt; {
  if (viewportWidth === currentBreakpoint) return true;
  return (
    viewportWidth &gt;= currentBreakpoint &amp;&amp;
    viewportWidth &lt; nextLargerBreakpointPx(currentBreakpoint)
  );
};

@carbon/elements

A collection of design elements in code for the IBM Design Language

GitHub
Apache-2.0
Latest version published 2 days ago

Package Health Score

93 / 100
Full package analysis

Popular @carbon/elements functions

Similar packages