Core

Provides the necessary theming context for all components.

Emotion

Emotion's core components and utilities are exposed to ensure a single version is bundled with the design system and the consuming application.

Core component

The Core component provides the default styles along with CSS normalize. You should wrap your entire application in this component.

<Core>
  {/* app content */}
</Core>

Custom link component

The linkComponent prop allows you to customise the rendering of Balance links (e.g. TextLink) across an entire application. This is useful for client-side routing, handling analytics, etc.

When defining a custom link component, ensure you’re using forwardRef, 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, { forwardRef } from 'react'
import NextLink from 'next/link';
import { Core } from '@balance-web/core'
// First create the custom link
const CustomLink = forwardRef(({ href, ...props }, ref) =>
  href[0] === '/' ? (
    <NextLink href={href} passHref>
      <a ref={ref} {...props} />
    </NextLink>
  ) : (
    <a ref={ref} href={href} {...props} />
  )
)
// Then pass it to Core
export const App = () => (
  <Core linkComponent={CustomLink}>
    ...
  </Core>
)