@typographist/react-devtools
v5.0.2
Published
React devtools is part of the [Typographist](https://github.com/typographist) ecosystem. It is necessary to develop and debug web apps on react with the help of vertical rhythm.
Downloads
7
Readme
React Devtools
React 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
User yarn or npm
yarn add @typographist/react-devtools
npm i @typographist/react-devtools
How To Use?
import React, { Fragment } from 'react';
import { render } from 'react-dom';
import { Typographist, RhythmDebugger } from '@typographist/react-devtools';
import '@typographist/react-devtools/style.css';
const App = () => (
<Typographist>
<RhythmDebugger>{/* your components */}</RhythmDebugger>
</Typographist>
);
render(<App />, document.querySelector('#root'));
Rhythm Toggle Button
Add Rhythm Toggle Button on Page
const App = () => (
<Typographist withButton>
<RhythmDebugger>{/* your components */}</RhythmDebugger>
</Typographist>
);
Fluid Rhythm
/* If your use */
:root {
@root (fluid);
}
const App = () => (
<Typographist fluid withButton>
<RhythmDebugger>{/* your components */}</RhythmDebugger>
</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 |