vdux-containers

Container components that wrap the components in vdux-ui and provide them with stateful behavior

Usage no npm install needed!

<script type="module">
  import vduxContainers from 'https://cdn.skypack.dev/vdux-containers';
</script>

README

containers

js-standard-style

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