import { useToken } from '@uhg-abyss/mobile';

This hook returns a function that is used to get the style value associated with a token defined in the theme. Use this whenever you want to pass in a prop with the value of a token string instead of the associated token value.

Properties

type TokenKey = 'colors' | 'space' | 'sizes' | 'fontSizes' | 'lineHeights' | 'fontWeights' | 'fonts' | 'radii';
interface TokenConfig {
  retain?: boolean;
};

useToken(key: TokenKey, config?: TokenConfig)

Usage

The key argument corresponds to the upper level category inside the theme. Start with defining a function and passing it the string of the token key. You can then use that function to pass in your token element and get the associated value. A hex value can also be passed in as a token and it will be returned as is|unless set not to.

const theme = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
  },
};

const getColorToken = useToken('colors');
const color = getColorToken('$core.color.brand.100');

Example

Defaults

By default, the useToken hook uses the passed in value if the token is not found/is invalid. This allows it to take hex and string values and return them as is.

Using the config parameter, you can pass in {retain: false} to require tokenized values.