Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
LICENSE
README.md
package.json

README.md

fela-layout-debugger

npm version npm downloads Bundlephobia

Uses styles-debugger to add outlines and labels to every rule component. This helps to debug the application layout.
Same rules will always have the same color.

Installation

yarn add fela-layout-debugger

You may alternatively use npm i --save fela-layout-debugger.

Usage

import { createRenderer } from 'fela'
import layoutDebugger from 'fela-layout-debugger'

const renderer = createRenderer({
  enhancers: [ layoutDebugger() ]
})

Configuration

Options

It takes an options object with the shape of the official styles-debugger configuration options.

Example
import { createRenderer } from 'fela'
import layoutDebugger from 'fela-layout-debugger'

const layoutDebuggerEnhancer = layoutDebugger({
	pseudoElement: 'before',
	color: 'red',
	borderSize: 3,
	position: 3
})

const renderer = createRenderer({
  enhancers: [ layoutDebuggerEnhancer ]
})

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @robinweser and all the great contributors.

You can’t perform that action at this time.