React-tokens-presenters NPM

List of presenter for design tokens

Homepage

Demo

Install

npm i -S react-tokens-presenters

Usage

Works well with design-tokens-parser

See demo directory for examples or presenters preprocessors demos examples

Working with design-tokens-parser

import { scssParser } from 'design-tokens-parser';
import {TokenSumarry} from 'react-tokens-presenters';

const scssReq = require.context(
  `!!raw-loader!../<MY_PATH>`,
  true,
  /tokensFiles.scss$/
);

// We create and array of file path
const files = scssReq.keys();
const tokens = files
      .map((filename) => scssReq(filename).default) // read file content
      .map(scssParser) // parse file content and return a doube array of tokens
      .flat() // flat double array into single array


<TokenSumarry tokens={tokens}/>

In cases where you need a custom layout, you have presenter to reuse them.

import { scssParser } from 'design-tokens-parser';
// We import Color
import { Color } from 'react-tokens-presenters';

const scssReq = ...

// We create and array of file path
const files = scssReq.keys();
const tokens = ...

tokens.map((token, index) => <Color token={token} key={index} />)