This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

UI-Block

Introduction

This library provides several css utilities.

<Block px={12} mt="6rem">
  <code>npm i ui-block</code>
</Block>

Performance

Provides predefined classes, and automatically treats them as inline-style if not.

CSS-in-JS

Overlapping CSSProvider allows you to implement an independent style within the scope.

import { Block, CSSProvider } from "ui-block";

<CSSProvider>
  <Block p={1}>The padding here is 0.25 rem.</Block>
  <CSSProvider config={{ getSize: (v) => `${v * 0.5}rem` }}>
    <Block p={1}>The padding here is 0.5rem.</Block>
  </CSSProvider>
</CSSProvider>;

If you do not want to use CSSProvider, use preset.css

import "ui-block/lib/preset.css";

API

Block

prop	type	default	description
m	PredefinedSize | CSSSize	undefined	margin
mx	PredefinedSize | CSSSize	undefined	horizontal margin
my	PredefinedSize | CSSSize	undefined	vertical margin
mt	PredefinedSize | CSSSize	undefined	margin top
mr	PredefinedSize | CSSSize	undefined	margin right
mb	PredefinedSize | CSSSize	undefined	margin bottom
ml	PredefinedSize | CSSSize	undefined	margin left
p	PredefinedSize | CSSSize	undefined	padding
px	PredefinedSize | CSSSize	undefined	horizontal padding
py	PredefinedSize | CSSSize	undefined	vertical padding
pt	PredefinedSize | CSSSize	undefined	padding top
pr	PredefinedSize | CSSSize	undefined	padding right
pb	PredefinedSize | CSSSize	undefined	padding bottom
pl	PredefinedSize | CSSSize	undefined	padding left
html	React.HTMLAttributes<HTMLDivElement>	undefined

CSSProvider

prop	type	default	description
getSize	(value: PredefinedSize) => CSSSize	(v: number) => `${v \* 0.25}rem`	predefined size getter
prefix	string	random string value	class prefix