HopperProvider

HopperProvider is the container for all applications using Hopper. It defines the color scheme, locale, and other application level settings. It is also used to dynamically inject CSS variables and body styles to your application.

Props

locale?

The The BCP47 language code for the locale.

navigate?

Set this up once in the root of your app, and any Hopper component with the href prop will automatically navigate using your router. This prop should be set to a function received from your router for performing a client side navigation programmatically.

useHref?

useHref is an optional prop that converts a router-specific href to a native HTML href, e.g. prepending a base path.

children

The children of the component

withBodyStyle?

Determines whether the styles should be added to the document's body By default, it is set to false. If set to true, it will apply additional styling to the document's body.

colorScheme?

The color scheme to use.

Defaults to light.
defaultColorScheme?

Default color scheme to use when a user preferred color scheme (system) is not available.

Defaults to light.
withCssVariables?

Determines whether token CSS variables should be added to the document's head By default, it is set to true, you should not change it unless you want to manage CSS variables via .css files

Defaults to true.
unsupportedMatchMediaBreakpoint?

The breakpoint to use when the browser does not support matchMedia.

Defaults to lg.
style?
className?
id?

Application provider

A HopperProvider must be the root component of your application. All other Hopper components rely on the Provider to define the color scheme, locale, and other settings that they need in order to render. You can nest multiple HopperProviders to create different themes or locales for different parts of your application if needed.

Color scheme

We recommend supporting both light and dark color schemes in your application. If you need to override this with an application specific setting, you can use the colorScheme prop.

See the styling documentation for more information about using Hopper color variables in your application to ensure it adapts to light and dark mode properly.

See the color schemes documentation for more information on how to apply a color scheme to your application.

Locales

Another important setting for your application is the locale. By default, Hopper chooses the locale matching the user's browser/operating system language. This can be overridden with the locale prop if you have an application specific setting. This prop accepts a BCP 47 language code. Hopper currently supports the following locales: en-US, en-UK, fr-CA, fr-FR.

To access the current locale anywhere in your application, see the useLocale hook.

Client side routing

The HopperProvider component accepts an optional router prop. This enables Hopper components that render links to perform client side navigation using your application or framework's client side router. See the client side routing guide for details on how to set this up.

Inject body styles

withBodyStyle determines whether you want Hopper to style the body of your application. By default, it is set to false. You should enable it on the Hopper provider at the root of your application.

withBodyStyle includes the following body elements styles:

body { -webkit-font-smoothing: antialiased; font-family: var(--hop-body-md-font-family); line-height: var(--hop-body-md-line-height); font-size: var(--hop-body-md-font-size); color: var(--hop-neutral-text); background-color: var(--hop-neutral-surface); margin: 0; padding: 0; } @media not (prefers-reduced-motion) { body { scroll-behavior: smooth; } }

Inject CSS Variables

withCssVariables determines whether Hopper's CSS variables should be added to your application. By default, it is set to true and should not be changed unless you want to manage CSS variables via a CSS file. Note that in this case, you will need to add the tokens manually, ideally using the @hopper-ui/tokens package.