Configuration

The react-better-html library allows you to configure various aspects of its components through the <BetterHtmlProvider> wrapper component. This includes customizing the theme, icons, assets and more.

BetterHtmlProvider

The <BetterHtmlProvider> component should wrap your application's root component to apply the configuration.

main.tsx

import { createRoot } from "react-dom/client";
import { BetterHtmlProvider } from "react-better-html";

import App from "./App";

const root = document.getElementById("root");
createRoot(root).render(
   <BetterHtmlProvider>
      <App />
   </BetterHtmlProvider>
);

This is enough for the components to work with the default configuration that the library comes with. They can be overridden by passing value prop to the <BetterHtmlProvider> tag.

note

If no value is provided, then all components in the library will use the default configuration that comes with the library. Check out the default configuration

App configuration

There are some configuration properties for the whole app that can be set from the app object

<BetterHtmlProvider
   value={{
      ...
      app: {
         contentMaxWidth: 1200
      },
      ...
   }}
>
   <App />
</BetterHtmlProvider>

Theme configuration

It accepts object of type Theme and can customize the styles and colors. Colors support theme management.

<BetterHtmlProvider
   value={{
      ...
      theme: {
         light: {
            colors: {
               backgroundBase: "#f0f0f0"
            }
         },
         styles: {
            gap: 20
         }
      },
      ...
   }}
>
   <App />
</BetterHtmlProvider>

All properties are optional - the default configuration values will be used otherwise.

tip

We recommend using the default values initially and change them only if needed by your special use-cases.

Icons configuration

It accepts object of type IconConfig and can customize the already predefined ones. You can also define your own icons and use them by name in the Icon component.

<BetterHtmlProvider
   value={{
      ...
      icons: {
         XMark: { // `XMark` is the name of the icon
            width: 384,
            height: 512,
            paths: [
               {
                  d: "M342.6 150.6c12.5-12.5 ...",
                  type: "fill"
               }
            ]
         },
         ...
      },
      ...
   }}
>
   <App />
</BetterHtmlProvider>

Assets configuration

It accepts object of type AssetConfig and can override the already predefined ones. You can also define your own images/assets and use them by name in the Image component.

import logoAsset from "../assets/logo.svg";

<BetterHtmlProvider
   value={{
      ...
      assets: {
         logo: logoAsset, // `logo` is the name of the asset
         ...
      },
      ...
   }}
>
   <App />
</BetterHtmlProvider>

Loaders configuration

It accepts object of type LoaderConfig and can override the already predefined ones. You can also define your own loaders and use them by name in the app.

<BetterHtmlProvider
   value={{
      ...
      loaders: {
         testLoader: false, // `testLoader` is the name of the loader
         ...
      },
      ...
   }}
>
   <App />
</BetterHtmlProvider>

You can access the value of the loaders using the useLoader hook. To change the values dynamically you can use the useLoaderControls hook.

Components configuration

It accepts a list of components that can be configured. Per every component you can override the default styles and the tag used for the component itself.

An example can be seen below where the button component is having the default style overridden and the tag used for the component is changed.

<BetterHtmlProvider
   value={{
      ...
      components: {
         button: {
            style: {
               default: {
                  backgroundColor: "#16d7ed",
                  color: "#ffffff",
               },
            },
            tagReplacement: {
               buttonComponent: "button",
            },
         },
         ...
      },
      ...
   }}
>
   <App />
</BetterHtmlProvider>

note

Currently only the button component is supported. But we plan to add more components in the future.

Default Configuration

Here are the default values used in the global configuration of the components.

App

The default values for the app constants in the library are:

• contentMaxWidth - 1100px

Theme

The default colors used in the library are (More on the Theme type page):

• textPrimary - #111111
• textSecondary - #777777
• textLink - #0894ff
• label - #111111
• primary - #6d466b
• secondary - #412234
• accent - #16d7ed
• success - #28a745
• info - #0fa0da
• warn - #ffc107
• error - #dc3545
• base - #f8f8f8
• backgroundBase - #f8f8f8
• backgroundSecondary - #e8e8e8
• backgroundContent - #ffffff
• border - #ced4da

The default styles used in the library are:

• space - 16px
• gap - 8px
• borderRadius - 10px
• fontFamily - Arial, sans-serif
• transition - ease 0.2s

tip

Those styles are tested in different projects and UI layouts and fit 85% of the use-cases, so you are not likely to change them.

Icons

The default icons used in the library are (More on the Icons type page):

• XMark - the symbol X
• uploadCloud - a cloud with an arrow pointing up

Assets

The default assets used in the library are (More on the Assets type page):

• logo - The logo of the project (you can override it with your own logo)

Loaders

There are no default loaders predetermined in the library.