@atlaskit/heading
Version:
A heading is a typography component used to display text in different sizes and formats.
29 lines • 922 B
JavaScript
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;