@typographist/styled-devtools

Styled Devtools

Styled devtools is part of the Typographist ecosystem. It is necessary to develop and debug web apps on react with the help of vertical rhythm.

Installation

yarn add @typographist/styled-devtools

How To Use?

import React from 'react';
import { render } from 'react-dom';
import { Typographist, Rhythm } from '@typographist/styled-devtools';

const App = () => (
  <Typographist>
    <Rhythm>{/* your components */}</Rhythm>
  </Typographist>
);

render(<App />, document.querySelector('#root'));

Rhythm Toggle Button

Add Rhythm Toggle Button on Page

const App = () => (
  <Typographist withToggle>
    <Rhythm>{/* your components */}</Rhythm>
  </Typographist>
);

Fluid Rhythm

const App = () => (
  <Typographist fluid withToggle>
    <Rhythm>{/* your components */}</Rhythm>
  </Typographist>
);

Switch the rhythm to fluid.

Keyboard Shortcuts

If you do not feel comfortable switching the rhythm step by step by pressing the button, you can use keyboard shortcuts

command	keys
show single rhythm	s + r
show double rhythm	d + r
hide rhythm	o + r