# Typographist react devtools

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.

## Installation

User yarn or npm

```
yarn add typographist-react-devtools
```

```
npm i typographist-static-devtools
```

## Connect Typographist-react-devtools

### Js

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 = () => (
  <Fragment>
    <Typographist>
      <Typographist.Switch />
      <Typographist.Debugger>{/* your components */}</Typographist.Debugger>
    </Typographist>
  </Fragment>
);

render(<App />, document.querySelector('#root'));
```

### <Typographist.Switch />

Change zIndex

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

### Without <Typographist.Switch />

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

### Fluid rhythm

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

Switch the rhythm to fluid.

```jsx
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 |