This project provides a <Baseline> component that allows you to easily render a baseline overlay. To actually place the text on the baseline, check out basekick.

npm install react-baseline

import Baseline from 'react-baseline';

// Then, just wrap some element with <Baseline>
render() {
  return (
    <Baseline lineHeight={12}>
      <div>
        Some element
      </div>
    </Baseline>
  );
}

• isVisible
• type
• lineHeight
• color
• You can also pass any other props like className, style, etc.

Controls whether the baseline overlay will be rendered or not. Default: true

Baseline overlay comes with two types: 'line' and 'bar'

Default: 'line'

The distance in px between two consecutive baselines.

Default: 9

The color of the baseline overlay.

All the usual CSS color formats are suppoted: '#123456', '#555', 'blue', 'rgb(100, 200, 300)'

Default: 'rgba(0, 0, 0, 0.15)'

$ npm install
$ npm start

MIT