HopperProvider

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.

Props