# vdux-containers

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

Latest version **1.2.10** (published 2017-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vdux-containers
pnpm add vdux-containers
yarn add vdux-containers
bun add vdux-containers
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.10 |
| Published | 2017-09-21 |
| First published | 2016-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ashaffer88 |

## Links

- npm: https://www.npmjs.com/package/vdux-containers
- Repository: https://github.com/vdux-components/containers
- Homepage: https://github.com/vdux-components/containers#readme
- Issues: https://github.com/vdux-components/containers/issues
- npm.io page: https://npm.io/package/vdux-containers

## Dependencies (12)

- [@f/noop](https://npm.io/package/@f/noop.md) ^1.2.0
- [@f/omit](https://npm.io/package/@f/omit.md) ^2.2.3
- [vdux-ui](https://npm.io/package/vdux-ui.md) ^1.3.4
- [@f/equal](https://npm.io/package/@f/equal.md) ^1.0.1
- [@f/debounce](https://npm.io/package/@f/debounce.md) ^1.0.4
- [@f/identity](https://npm.io/package/@f/identity.md) ^1.1.1
- [@f/load-image](https://npm.io/package/@f/load-image.md) ^2.0.0
- [@f/map-values](https://npm.io/package/@f/map-values.md) ^1.0.0
- [@f/foreach-obj](https://npm.io/package/@f/foreach-obj.md) ^1.1.1
- [@f/serialize-form](https://npm.io/package/@f/serialize-form.md) ^1.0.0
- [@f/contains-element](https://npm.io/package/@f/contains-element.md) ^1.0.0
- [@f/matches-selector](https://npm.io/package/@f/matches-selector.md) ^1.0.1

## Recent versions

- 1.2.10 (latest) — 2017-09-21
- 1.2.9 — 2017-09-20
- 1.2.8 — 2017-01-09
- 1.2.7 — 2016-12-13
- 1.2.5 — 2016-12-13
- 1.2.4 — 2016-12-13
- 1.2.3 — 2016-12-13
- 1.2.2 — 2016-12-13
- 1.2.1 — 2016-11-10
- 1.2.0 — 2016-11-10
- 1.1.24 — 2016-10-11
- 1.1.23 — 2016-10-10
- 1.1.22 — 2016-10-05
- 1.1.21 — 2016-09-30
- 1.1.19 — 2016-09-08
- … 20 more at https://npm.io/package/vdux-containers/versions

## README

# containers

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)

Container components that wrap presentational components and give them state.

## Installation

    $ npm install vdux-containers

## Containers

  * [CSSContainer](https://github.com/vdux-components/containers/tree/master/docs/CSSContainer.md) - Let's you pass along special props when the component is hovered, focused, or active
  * [Button](https://github.com/vdux-components/containers/tree/master/docs/Button.md) - Manages hover/tooltip state
  * [Dropdown](https://github.com/vdux-components/containers/tree/master/docs/Dropdown.md) - Manages openness
  * [MenuItem](https://github.com/vdux-components/containers/tree/master/docs/MenuItem.md) - Manages hover / css emulation

## Example

```javascript
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:

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

## License

MIT

---
_Source: https://npm.io/package/vdux-containers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._