@primitives/border

The <Border> primitive is designed to circumvent a couple of issues that could be source of headaches developing on a broad cross-platform system.

Usage no npm install needed!

<script type="module">
  import primitivesBorder from 'https://cdn.skypack.dev/@primitives/border';
</script>

README

The <Border> primitive is designed to circumvent a couple of issues that could be source of headaches developing on a broad cross-platform system.

Usage

import React from 'react'
import { Border } from '@primitives/border'
import { Block } from '@primitives/border'
import { Text } from '@primitives/text'

const HelloWorld = () => (
  <Block>
    <Border
      topWidth={2}
      rightWidth={2}
      bottomWidth={2}
      leftWidth={2}
      color={[240, 0, 230, 1]}
    />
    <Text>Hello World!!</Text>
  </Block>
)

Properties

Property Type Description Required
Color TColor * yes
topLeftRadius number px to top left radius
topRightRadius number px to top right radius
bottomRightRadius number px to bottom right radius
bottomLeftRadius number px to bottom left radius
topWidth number px top width
rightWidth number px right width
bottomWidth number px bottom width
leftWidth number px left width
overflowBottom number px offset from bottom container
overflowLeft number px offset from left container
overflowRight number px offset from right container
overflowTop number px offset from top container

*TColor: a tuple that will translate to rgba format, comes Colorido

Borders in Native vs Borders in the Web

CSS box-model offers an alternative in the web which approximates the bounding area to the one designers are more used to think. So, for web it‘s now a widespread good practice to work with box-sizing: border-box set at the top of an application global styles.

Though in React Native it‘s a different story. There is no alternative and the box-model is always content-box. In addition, there aren‘t many display types, being flex the norm there.

This is likely to cause slight discrepancies in the layout that are perceivable to every user and could disrupt the experience when setting borders or using any of the popular border hacks (with wrapping elements).