typographist-react-devtools
v3.0.12
Published
Typographist react devtools is part of the [Typographist](https://github.com/typography-gang/typographist) ecosystem. It is necessary to develop and debug web apps on react vue with the help of vertical rhythm.
Downloads
42
Readme
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 |