Skip to content

Latest commit

 

History

History
52 lines (42 loc) · 945 Bytes

README.md

File metadata and controls

52 lines (42 loc) · 945 Bytes
Raw

flus

Fluent styling API for React Components

npm

npm install flus
import { el } from 'flus'

const HStack = el("div").display("flex").flexDirection("row")

const Button = 
  el("button")
    .padding("2px 4px")
    .borderRadius("6px")
    .fontWeight("bold")

const PrimaryButton = 
  Button
    .color("white")
    .background("blue")

const SecondaryButton = 
  Button
    .color("black")
    .background("white")
    .border("1px solid blue")

// fancy call syntax
const ComponentB = () => 
  HStack.background("salmon")(
    PrimaryButton("Foo"), 
    SecondaryButton("Bar")
  )

// classic jsx
const ComponentA = () => 
  <HStack style={{ background: "salmon" }}>
    <PrimaryButton>Foo</PrimaryButton>
    <SecondaryButton>Foo</SecondaryButton>
  </HStack>

todo

  • proof of concept
  • publish npm package
  • code example
  • features
  • performance