BraidProvider

Provides the necessary theming context for all components.

Alternatives

BraidTestProvider — For test environments.

Selecting a theme

Themes should be imported from the themes folder and passed into BraidProvider using the theme prop.

import wireframe from "braid-design-system/themes/wireframe"
import { BraidProvider } from "braid-design-system"

export const App = () => <BraidProvider theme={wireframe}>...</BraidProvider>

Providing a custom link component

The linkComponent prop allows you to customise the rendering of Braid links (e.g. Link, TextLink, ButtonLink, MenuItemLink) across an entire application. This is useful for conditionally rendering React Router links, handling analytics, etc.

When defining a custom link component, ensure you’re using the makeLinkComponent helper function and forwarding the ref argument, otherwise certain link usages will be unable to function correctly.

If you want to make use of this mechanism within your own components, use Link which simply forwards your custom link component internally.

import React from "react"
import { Link as ReactRouterLink } from "react-router-dom"
import { BraidProvider, makeLinkComponent } from "braid-design-system"
import wireframe from "braid-design-system/themes/wireframe"

// First create the custom link implementation:
const CustomLink = makeLinkComponent(({ href, ...restProps }, ref) =>
  href[0] === "/" ? (
    <ReactRouterLink ref={ref} to={href} {...restProps} />
  ) : (
    <a ref={ref} href={href} {...restProps} />
  )
)

// Then pass it to BraidProvider:
export const App = () => (
  <BraidProvider theme={wireframe} linkComponent={CustomLink}>
    ...
  </BraidProvider>
)

Braid Logo