ui-box
v5.4.1TypeScript
Blazing Fast React UI Primitive
0/weekUpdated 3 days agoMITUnpacked: 135.0 KB
Published by harksingh
📦 ui-box is a low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties. This is very useful for adding things like margins to components, which would normally require adding non-reusable wrapper elements/classes.
Install
``shell`
yarn add ui-boxor
npm install --save ui-box
Usage
`jsx
import Box from 'ui-box'
function Button(props) {
return
}
function Example() {
return (
)
}
`
The above example component renders a red, disabled
$3
#### Box (default export)
##### is
Type: string or React component type'div'
Default:
Lets you change the underlying element type. You can pass either a string to change the DOM element type, or a React component type to inherit another component. The component just needs to accept a className prop to work. A good example is inheriting the react-router Link component.
E.g:
`jsx`
Login
##### clearfix
Type: boolean
Utility property for easily adding clearfix styles to the element.
##### className
Type: string
The className prop you know and love. Internally it gets enhanced with additional class names for the CSS properties you specify.
##### selectors
Type: object
This prop allows you to define selectors and custom styles to apply when the selector condition is met. This can be used to create richer element interactions, such as hover or focus states, without the use of another css-in-js library.
`tsx`
Hello world
##### CSS properties
All of these CSS properties are supported. You can pass either a string or a number (which gets converted to a px value). The shorthand properties with repeated values only accept a single value, e.g. margin="10px" works but margin="10px 20px" does not. You can use the x/y props (e.g. marginX/marginY) to achieve the same thing.
- alignContent
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Set to border-box by default.clear
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Sets marginLeft and marginRight to the same value.marginY
- - Sets marginTop and marginBottom to the same value.maxHeight
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Sets paddingLeft and paddingRight to the same value.paddingY
- - Sets paddingTop and paddingBottom to the same value.placeContent
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
##### Other props
All other props passed through to the underlying DOM element / React component.
#### extractStyles()
Returns a { cache, styles } object which contains the cache entries and rendered styles for server rendering. The styles can be output in a
${html}