bocxs

v1.0.0-b5

Published

2 years ago

React component primitives built with cxs and inspired by Basscss

Downloads

0High
0Medium
0Low

jxnblk

Bocxs

React component primitives built with cxs and inspired by Basscss and jsxstyle

npm i bocxs

// Basic example
import React from 'react'
import { Box } from 'bocxs'

const App = () => (
  <Box p2 mb2 white bgBlue>
    <h1>Box with padding, margin bottom, white text, and blue background</h1>
  </Box>
)

// Primitives
import {
  Base,
  Box,
  Block,
  InlineBlock,
  Inline,
  Flex
} from 'bocxs'

<Block>Display block div</Block>

<InlineBlock>Display inline block div</InlineBlock>

<Inline>Display inline div</Inline>

<Flex>Display flex div</Flex>

<Box>Generic Bocxs div</Box>

<Base is='button'>Base element</Base>

Props

css - style object for cxs - will be converted into a unique className and inject styles into the head of the document

Booleans

m0 - m4 - margin from a scale from 0 to 4
mt0 - mt4 - margin top
mr0 - mr4 - margin right
mb0 - mb4 - margin bottom
ml0 - ml4 - margin left
mx0 - mx4 - margin left and right
my0 - my4 - margin left and right
m-1 - m-4 - negative margin from a scale from 0 to 4
mt-1 - mt-4 - negative margin top
mr-1 - mr-4 - negative margin right
mb-1 - mb-4 - negative margin bottom
ml-1 - ml-4 - negative margin left
mx-1 - mx-4 - negative margin left and right
my-1 - my-4 - negative margin left and right
p0 - p4 - padding from a scale from 0 to 4
pt0 - pt4 - padding top
pr0 - pr4 - padding right
pb0 - pb4 - padding bottom
pl0 - pl4 - padding left
px0 - px4 - padding left and right
py0 - py4 - padding left and right

Numbers

w - percentage width as a number from 0 - 1
sw - percentage width as a number from 0 - 1 from the small breakpoint and up
mw - percentage width as a number from 0 - 1 from the medium breakpoint and up
lw - percentage width as a number from 0 - 1 from the large breakpoint and up

Strings

display - sets display

Colors

Includes all colors from open-color

white
black
gray - gray0 - gray9
red - red0 - red9
pink - pink0 - pink9
grape - grape0 - grape9
violet - violet0 - violet9
indigo - indigo0 - indigo9
blue - blue0 - blue9
cyan - cyan0 - cyan9
teal - teal0 - teal9
green - green0 - green9
lime - lime0 - lime9
yellow - yellow0 - yellow9
orange - orange0 - orange9

Borders

border - one of true, false, Number, 'top', 'right', 'bottom', or 'left'
borderColor

Border Radii

rounded - one of true, false, 'top', 'right', 'bottom', or 'left'

Server Side Rendering

When rendering client-side, cxs will automatically insert a style tag into the head. For server-side rendering, get the CSS string from cxs after render.

const React = require('react')
const { renderToString } = require('react-dom/server')
const { cxs } = require('cxs')
const App = require('./App')

module.exports = (req, res) => {
  const html = renderToString(React.createElement(App))
  const css = cxs.css

  return `<!DOCTYPE html>
  <style>${css}</style>
  ${html}`
}

Higher Order Component

Bocxs style props can be added to any component using the higher order component.

import React from 'react'
import { Link } from 'react-router'
import { withBocxs } from 'bocxs'

const CustomLink = (props) => (
  <Link {...props} />
)

export default withBocxs(CustomLink)

MIT License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme