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 |