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

$3

requireJs

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

es6 modules

`js
import Typographist from 'typographist-react-devtools';
`

How to use?

`jsx
import React, {Fragment} from 'react';
import { render } from 'react-dom';
import Typographist from 'typographist-react-devtools';
import 'typographist-react-devtools/devtools.css';

const App = () => (



{/ your components /}


);

render(, document.querySelector('#root'));
`

$3

Change zIndex

`jsx
const App = () => (



{/ your components /}


);
`

$3

`jsx
const App = () => (


{/ your components /}


);
`

$3

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

Switch the rhythm to fluid.

`jsx
const App = () => (


{/ your components /}


);
``

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 |