jsx-elements v1.0.95

jsx-elements

Compact syntax inline styling of JSX

Install it

Install it

npm install --save jsx-elements

Usage

JSX-elements is normal jsx elements but with extra shorthand attributes for quick inline styling. The extra attributes are either boolean or need a string value.

Usage example

import * as React from 'react'
import e from 'jsx-elements'

const myComponent = (props) => (
  <e.div ma="20px">
    <e.p4 bold pointer>Hello world</e.p4>
  </e.div>
)

Flexbox

Flexbox shorthands

Flexbox can be a bit verbose. JSX-elements simplefies the flexbox idea and uses directions istead of flexbox attributes like flex-start, flex-end and so on. with the shorthand you define in the container where you want to place the children. all flexbox shorthands starts with f. \n fr = flex row. The children will be stacket horisontally fc = flex column. The children will be stacked vertically Next letter defines how children are to be placed vertically (top, center, bottom) and fourth lettter how it should be placed horisontally(left, center, right). So "frtl" will stack the children horisontally and align it top left in the container. "fccc" will stack the children vertically and align it center vertically and center horisontally

Position attributes:

• frtl: flex row top left ⋅⋅ frtr: flex row top right ⋅⋅ frtc: flex row top center ⋅⋅ frbl: flex row bottom left ⋅⋅ frbr: flex row bottom right ⋅⋅ frbc: flex row bottm center ⋅⋅ frcl: flex row center left ⋅⋅ frcr: flex row center right ⋅⋅ frcc: flex row center center

fctl: flex column top left fctr: flex column top right fctc: flex column top center fcbl: flex column bottom left fcbr: flex column bottom right fcbc: flex column bottm center fccl: flex column center left fccr: flex column center right fccc: flex column center center

Example shorthand position

  <e.div fctl>
    <e.p4>Item 1</e.p4>
    <e.p4>Item 2</e.p4>
    <e.p4>Item 3</e.p4>
    <e.p4>Item 4</e.p4>
  </e.div>

Other flexbox attributes

fw: flex wrap. Wraps the children to next line if there is not enough space for all childen f1: sets "flex: 1;" f2: sets "flex: 2;" f3: sets "flex: 3;" fs0: sets flex shrink to 0. Often used to avoid container colapse