vdux-containers

containers

Container components that wrap presentational components and give them state.

Installation

$ npm install vdux-containers

Containers

• CSSContainer - Let's you pass along special props when the component is hovered, focused, or active
• Button - Manages hover/tooltip state
• Dropdown - Manages openness
• MenuItem - Manages hover / css emulation

Example

import {Button} from 'vdux-ui'
import {CSSContainer} from 'vdux-containers'
 
function render ({props, children}) {
  return (
    <CSSContainer ui={Button} {...props} hoverProps={{...(props.hoverProps || {}), highlight: true, tooltipShown: true}}>
      {children}
    </CSSContainer>
  )
}

You can then use that button like:

function render () {
  return (
    <Button tooltip='Some hovertext!' activeProps={{border: true}}>
      Hover me!
    </Button>
  )
}

License

MIT