React Baseline

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.

Installation

npm install react-baseline

Basic Usage

import Baseline from 'react-baseline';
 
// Then, just wrap some element with <Baseline>
render() {
  return (
    <Baseline lineHeight={12}>
      <div>
        Some element
      </div>
    </Baseline>
  );
}

Props

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

isVisible (optional)

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

type (optional)

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

Default: 'line'

lineHeight (optional)

The distance in px between two consecutive baselines.

Default: 9

color (optional)

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)'

Development

$ npm install
$ npm start

License

MIT