• /
  • Log in
  • Free account

Spacing

Provides spacing to any wrapped component. Spacing is provided as a tuple that can contain zero, one, two, three or four values. Each of these values is coming from the TYPE static property.

The structure of the tuple is very similar to how margin or padding properties work: specifying one value replicates them across the four sides, two across top/bottom and left/right, etc. If you are willing to omit a specific value, while passing others, you can use OMIT as a placeholder. The space on the side (or sides) where it is used will be left intact.

Other components from the SDK have spacing capabilities built-in. If you would like to replicate the same capability on your own component, you can use Spacing.add and pass the component; the component returned by the method will contain the type prop as well as the statics.

Usage

import { Spacing } from 'nr1'

Props

childrennode

Element to space. Spacing can only be applied to one signle element at a time; to space multiple ones, each of them needs to be wrapped individually.

classNamestring

Appends class names to the component.

styleobject

Inline style for custom styling.

typeenum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use TYPE.OMIT.

<Array of
<One of
Spacing.TYPE.EXTRA_LARGE,
Spacing.TYPE.LARGE,
Spacing.TYPE.MEDIUM,
Spacing.TYPE.NONE,
Spacing.TYPE.OMIT,
Spacing.TYPE.SMALL,
>
>

Basic

ReferenceError: Spacing is not defined

Omit margins

ReferenceError: Spacing is not defined

Methods

Spacing.render

function () => undefined

Spacing.add

Enhances the given component by adding a spacingType prop, and makes use of it so that the component can automatically be spaced using it.

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.