Balance Logo
Balance
Reckon Design System

Core

Core includes a range of styles, variables and helpers that form the foundation of how the Design System works.
Install
pnpm add @reckon-web/core
Import usage
import {
css,
jsx,
keyframes,
Global,
ClassNames,
Core,
buildDataAttributes,
useLinkComponent
} from '@reckon-web/core';
  • Code
  • API

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>

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 '@reckon-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>
)
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo