# mainLayout

Source: https://developers.inkdrop.app/states/main-layout

An [app state](https://developers.inkdrop.app/guides/flux-architecture) of the editor.
You can obtain the `mainLayout` state and integrate it with React components.

---

## Data Structure

- **distractionFreeEnabled** (boolean)

  `true` if distraction-free mode is enabled
- **sidebarVisible** (boolean)

  `true` if side bar is visible

Get the `mainLayout` state manually:

```js
const { mainLayout } = env.store.getState()
```

Connect the state with your React component:

```js
import { useSelector } from 'react-redux'
const selector = ({ mainLayout }) => mainLayout
const MyComponent = props => {
  const mainLayout = useSelector(selector)
  // render
}
```