Typographist react devtools

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

Installation

User yarn or npm

yarn add typographist-react-devtools

npm i typographist-static-devtools

Connect Typographist-react-devtools

Js

requireJs

const Typographist = require('typographist-react-devtools');

es6 modules

import Typographist from 'typographist-react-devtools';

How to use?

import React, {Fragment} from 'react';
import { render } from 'react-dom';
import Typographist from 'typographist-react-devtools';
import 'typographist-react-devtools/devtools.css';
 
const App = () => (
  <Fragment>
    <Typographist>
      <Typographist.Switch />
      <Typographist.Debugger>{/* your components */}</Typographist.Debugger>
    </Typographist>
  </Fragment>
);
 
render(<App />, document.querySelector('#root'));

<Typographist.Switch />

Change zIndex

const App = () => (
  <Fragment>
    <Typographist>
      <Typographist.Switch zIndex={3000} />
      <Typographist.Debugger>{/* your components */}</Typographist.Debugger>
    </Typographist>
  </Fragment>
);

Without <Typographist.Switch />

const App = () => (
  <Fragment>
    <Typographist>
      <Typographist.Debugger>{/* your components */}</Typographist.Debugger>
    </Typographist>
  </Fragment>
);

Fluid rhythm

/* If your use */
:root {
  @root (fluid);
}

Switch the rhythm to fluid.

const App = () => (
  <Fragment>
    <Typographist root="fluid">
      <Typographist.Debugger>{/* your components */}</Typographist.Debugger>
    </Typographist>
  </Fragment>
);

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