@mapbox/frontend-util-styles

@mapbox/frontend-util-styles

frontend-util-styles includes two things:

• A set of class constants that align to Mapbox Styleguide styles.
• A set of utilities for using the class constants.

Installation

npm install @mapbox/frontend-util-styles

API

styles.js maintains state of a style object and exports three functions:

getStyle

Get the corresponding style rules for a given constant.

getStyle('h1');

// 'txt-h1-mm txt-h2 txt-fancy'

Pass an array of strings as an optional second argument in order to exclude classes from the style constant:

getStyle('h1', ['txt-fancy']);

// 'txt-h1-mm txt-h2'

mergeStyles

Use this method to combine a set of constants with existing constants.

mergeStyles({
  h1: 'some nice classes',
  foo: 'bar'
});

/*
_styles ->
{
  h1: 'some nice classes',
  h2: 'txt-h2-mm txt-h3 txt-fancy mb6',
  ...
  foo: 'bar'
}
*/

setStyles

Set the contents of the styles object. Overrides existing constants. Use this method if you do not want to use the default values in src/styles.js:

setStyles({ foo: 'bar' });

/*
_styles ->
{
  foo: 'bar'
}
*/

Example usage

Use the styles util to set the className property in React components:

import { mergeStyles, getStyle } from '../src/styles';

mergeStyles({
  specialHeading: 'some fun classes',
  specialParagraph: 'more fun classes'
});

class Example extends React.Component {
  render() {
    return (
    <div>
      <div className={getStyle('specialHeading')}>
      Hello world!
      </div>
      <div className={getStyle('h1', ['txt-fancy'])}>
      Goodbye world!
      </div>
    </div>);
  }
}

/*
<div>
  <div class='some fun classes'>
  Hello world!
  </div>
  <div class='txt-h1-mm txt-h2 mb6'>
  Goodbye world!
  </div>
</div>
*/