react-box

This repository is merged into https://github.com/symbo-ls/smbls

---

Table of Contents

• Installation
• API documentation
• Examples
• Properties

Install

To install, you can use npm or yarn:

$ npm install --save @symbo.ls/react-box
$ yarn add  @symbo.ls/react-box

Usage

Box element which can be used with

Examples

import { Box } from '@symbo.ls/react'

// example 1
const buttonProps = {
  theme: 'primary',
  size: 'A',
  padding: 'B Z'
}

const Button2 = () => <Box tag="button" ...buttonProps />

// example 2
const buttonConf = {
  tag: 'button',
  props: {
    theme: 'primary',
    size: 'A',
    padding: 'B Z'
  }
}

const Button3 = () => <Box ...buttonConf />

API

The primary documentation for react-box is the reference book, which describes the API and gives examples of its usage.

Props

Properties: className ref href - link destination of the element target - link target src - Source path (eg Link) of the image alt - Alternative text in case image does not load title - Title when hovering the image ariaLabel

style properties: width - Width of the element height - Height of the element boxSize - [width, heigh]

maxWidth - Max width of the box minWidth - Min width of the box widthRange - Min and Max width range of the box

maxHeight - Max height of the box minHeight - Min height of the box heightRange - Min and Max height range of the box

aspectRatio - Aspect ratio of the box (1/3, 3/7…) padding - Inner space of the element margin - Outer space of the element gap - Space between children inside the element

flexFlow - flexAlign - display: flex, alignItems and justifyContent

flow flexDirection alignItems justifyContent gap

text - Text value in the element size - Text size of the element

direction - Language direction of the component

values: `ltr`, `rtl`

Important Note

License

@symbo.ls/react-box is released under the MIT license.