LeafyGreen UI Context Provider
Last updated 2 months ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/leafygreen-provider 
SYNC missed versions from official npm registry.

LeafyGreen Provider

npm (scoped)

LeafyGreen Provider is a package made to provide, and make it easy to consume page-wide, interaction-related state within components, such as whether a user is navigating with a keyboard or mouse. This lets us make improvements to the user experience that would be cumbersome, or impossible to make without access to a global state.

Components should always gracefully degrade when the provider is not an ancestor. Please implement these APIs with that in mind.



yarn add @leafygreen-ui/leafygreen-provider


npm install @leafygreen-ui/leafygreen-provider


This is the context provider for LeafyGreen Provider, and should be added as high in the document tree as possible.



import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';

  <div>My Children</div>


<div>My Children</div>


Prop Type Description Default
children node Children passed to LeafyGreenProvider will be unmodified, aside from having access to its state.
baseFontSize 14 or 16 Describes the font-size that the application is using. <Body/> and <InlineCode /> components use this value to determine the font-size and line-height applied to their content 14



  usingKeyboard: boolean | undefined,
  setUsingKeyboard: boolean => void,

This hook allows you to directly read, and set the state of whether a user is interacting with the keyboard. The primary use-case for this is to set usingKeyboard to true when manually setting focus on an element.


import { useUsingKeyboardContext } from '@leafygreen-ui/leafygreen-provider';

const { usingKeyboard, setUsingKeyboard } = useUsingKeyboardContext();
const inputRef = useRef(null);

function autoFocus() {

  if (!usingKeyboard) {

<input type={text} ref={inputRef} />;




This hook allows you to read the base font-size of an application, based on the number returned from the hook.


import { useBaseFontSize } from '@leafygreen-ui/leafygreen-provider';

function InlineCode({ children, className }: InlineCodeProps) {
  const size = useBaseFontSize();
  const body = size === 16 ? typeScale2 : typeScale1;

  return (
    <code className={cx(sharedStyles, code, body, className)}>{children}</code>

Current Tags

  • 2.0.2                                ...           latest (2 months ago)

9 Versions

  • 2.0.2                                ...           2 months ago
  • 2.0.1                                ...           3 months ago
  • 2.0.0                                ...           4 months ago
  • 1.1.4                                ...           5 months ago
  • 1.1.3                                ...           6 months ago
  • 1.1.2                                ...           6 months ago
  • 1.1.1                                ...           9 months ago
  • 1.1.0                                ...           10 months ago
  • 1.0.0                                ...           a year ago

Copyright 2014 - 2016 © taobao.org |