UNPKG

@atlaskit/heading

Version:

A heading is a typography component used to display text in different sizes and formats.

29 lines 922 B
import React from 'react'; import { HeadingLevelContext } from './heading-level-context'; import { useHeadingLevel } from './use-heading-level'; /** * __Heading level provider__ * * The Heading level provider injects the heading level to all `Heading` components below it in the component tree. * * @example * ```tsx * // Will correctly infer the heading level * <HeadingContext value={1}> * <Heading>H1</Heading> * <HeadingContext> * <Heading>H2</Heading> * </HeadingContext> * </HeadingContext> * ``` */ var HeadingLevelContextProvider = function HeadingLevelContextProvider(_ref) { var children = _ref.children, value = _ref.value; var parentHeadingLevel = useHeadingLevel(); var headingLevel = parentHeadingLevel + 1; return /*#__PURE__*/React.createElement(HeadingLevelContext.Provider, { value: value || headingLevel }, children); }; export default HeadingLevelContextProvider;