RedLiner

Props

Usage

Basic Example

Wrapping a RedLiner component around a button displays the height, width, and an InfoBox which contains additional attributes.

<RedLiner>
  <button style={buttonStyle}>Measure Me</button>
</RedLiner>

Show on Hover

Use the prop showOnHover to only show RedLiner when the component is hovered.

<RedLiner showOnHover>
  <button style={buttonStyle}>Hover Me</button>
</RedLiner>

Configuring Options

Besides hover control, most customization is done through the config prop, which is an object containing the following properties:

• color (string): the color of the lines for height and width
• displayOpts ('all' | Array<'height' | 'info' | 'width'>): which parts of RedLiner are shown
• infoOpts (string[]): which CSS properties are shown inside the InfoBox

<RedLiner
  config={{
    color: 'purple',
    displayOpts: ['height', 'info'],
    infoOpts: ['borderRadius', 'color'],
  }}
  showOnHover
>
  <button style={buttonStyle}>Measure Me</button>
</RedLiner>

Custom Components

It's possible to replace the InfoBox and Line components by passing your custom component to the components prop. In this example, we replace the default InfoBox component with a custom InfoBox component.

<RedLiner components={{ InfoBox: CustomInfoBox }}>
  <button style={buttonStyle}>Measure Me</button>
</RedLiner>

Example: Custom InfoBox Component 1

import { defaultComponents } from 'redliner';
export const CustomInfoBox = (props) => (
  <div style={{ border: '1px dotted blue' }}>
    <defaultComponents.InfoBox {...props} />
  </div>
)

Example: Custom InfoBox Component 2

import { Popper } from 'react-popper';
import styles from 'styles/index.scss';
export const CustomInfoBox = (props) => (
  <Popper placement="right">
    {({ ref, style, placement, arrowProps }) => (
      <div className={styles.info} ref={ref} data-placement={placement} style={style}>
        <div className={styles.arrow} ref={arrowProps.ref} style={arrowProps.style} />
          <h6 style={{ fontSize: '16px' }}>Custom Info</h6>
        <span>p: {props.computedStyle.padding}</span>
      </div>
    )}
  </Popper>
);