wrapper-components.md

Back to Theme main page

Wrapper components

• Mithril example
• React JSX example

A wrapper component - also Higher Order Component - takes a regular component and returns a modified version, one that sets predefined behavior or styles. For example, we can create a SecondaryButton component by taking a Button and adding typical "secondary button" styles.

Mithril example

// secondary-button.js
import m from "mithril"
import { Button } from "polythene-mithril"
import { ButtonCSS } from "polythene-css"

export const SecondaryButton = {
  view: vnode =>
    m(Button, Object.assign(
      {},
      vnode.attrs, // pass on other options
      {
        className: "secondary-button",
        border: true
      }
    ))
}

// Create CSS for this component:
ButtonCSS.addStyle(".secondary-button", {
  color_light_border:     "#ddd",
  color_light_background: "#fff"
})

// app.js
import { SecondaryButton } from "./secondary-button"

m(SecondaryButton, {
  label: "Help"
})

React JSX example

// secondary-button.js
import { Button } from "polythene-react"
import { ButtonCSS } from "polythene-css"

export const SecondaryButton = props =>
  <Button className="secondary-button" borders {...props} />

// Create CSS for this component:
ButtonCSS.addStyle(".secondary-button", {
  color_light_border:     "#ddd",
  color_light_background: "#fff"
})

// app.js
import { SecondaryButton } from "./secondary-button"

<SecondaryButton label="Help" />