higher-order-decorator

higer-order-decorator

Given a container, return the equivalent decorator/enhancer

#####Usage:

var Card = ({ children, title }) =>
  <div>{ title }
    { children }
  </div>

var createDecorator = require('higher-order-decorator')
var withTitle = createDecorator(Card)

Component = withTitle(Component)
// or
Component = withTitle(Component, { title: 'some title' })

@withTitle
class Component {
  // ...
}

@withTitle({ title: 'some title' })
class Component {
  // ...
}

// with jsx pragma
import { h as pragma } from 'preact'
createDecorator = createDecorator.bind({ pragma })

#####This is stupid, the component is not gonna be useful if props are fixed like that! Then your container is not smart enough, how about this?

Card = ({ children, ...props }) => (
  { title } = { ...children.props, ...props },
  <div>{ title }
    { children }
  </div>
)

#####I have a lot of containers and I don't want to write that in all of them.

Fair enough, sounds like you need a custom enhancing logic. createDecorator actually takes a second parameter:

function enhancer(Component, Container, options) {
  return props => (
    // bear in mind this still violates one-way data flow and will cause PropTypes warnings
    options = { ...options, ...props },
    // the next 3 lines are taken from default enhancer
    <Container {...options}>
      <Component {...props} />
    </Container>
  )
}

createDecorator = createDecorator.bind({ enhancer })
// alternatively (or later, when you override)
withTitle = createDecorator(Card, enhancer)

(pragma will be ignored)