# react-announce-collapse

> a reusable decorator to create collapsable components

Latest version **3.1.0** (published 2016-02-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-announce-collapse
pnpm add react-announce-collapse
yarn add react-announce-collapse
bun add react-announce-collapse
```

## 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 | 3.1.0 |
| Published | 2016-02-29 |
| First published | 2016-02-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Tushar Mathur |
| Maintainers | tusharmathur |

## Links

- npm: https://www.npmjs.com/package/react-announce-collapse
- Repository: https://github.com/tusharmath/react-announce-collapse
- Homepage: https://github.com/tusharmath/react-announce-collapse#readme
- Issues: https://github.com/tusharmath/react-announce-collapse/issues
- npm.io page: https://npm.io/package/react-announce-collapse

## Dependencies (2)

- [argtoob](https://npm.io/package/argtoob.md) ^1.0.2
- [react-announce](https://npm.io/package/react-announce.md) ^3.0.0

## Recent versions

- 3.1.0 (latest) — 2016-02-29
- 3.0.1 — 2016-02-22
- 3.0.0 — 2016-02-19
- 2.0.0 — 2016-02-19
- 1.0.6 — 2016-02-18
- 1.0.5 — 2016-02-18
- 1.0.4 — 2016-02-18
- 1.0.3 — 2016-02-18
- 1.0.2 — 2016-02-18
- 1.0.1 — 2016-02-18
- 1.0.0 — 2016-02-18

## README

# react-announce-collapse
[![Build Status][travis-svg]][travis-build]
[![npm][npm-version-svg]][npm]
[![Coverage Status][coverage-svg]][coverage]

Dispatches custom event `COLLAPSE` on the component stream.

## Purpose
The decorator auto listens to two events on `window` object via — 'click' and the 'keydown' events. Based on certain conditions *(as described below)* the `COLLAPSE` custom-event is fired on the component stream.

- **CLICKs outside:** `false` is dispatched as an argument with the COLLAPSE event.
- **CLICKs inside:** The current state is `toggled` and then dispatched.

## Example
```javascript
import {Component} from 'React'
import {Subject} from 'rx'
import {asStream} from 'react-announce'
import {collapsable, isActive} from 'react-announce-collapse'

const state = new Subject()


@collapsable
@asStream(state) // observer is required for the decorator to dispatch the COLLAPSE event on it
class Dropdown extends Component {
  render () {
    return (<div>Hello World</div>)
  }
}

// isActive() is a utility method that returns the state (Boolean) as an Observable
isActive(state)
  .subscribe(x => console.log(x))

/* OUTPUT
  false
  true
  false
*/

```




[0]: https://github.com/lodash/lodash/issues/2004#issuecomment-185087141
[travis-svg]: https://travis-ci.org/tusharmath/react-announce-collapse.svg?branch=master
[travis-build]: https://travis-ci.org/tusharmath/react-announce-collapse
[npm-version-svg]: https://img.shields.io/npm/v/react-announce-collapse.svg
[npm]: https://www.npmjs.com/package/react-announce-collapse
[coverage-svg]: https://coveralls.io/repos/github/tusharmath/react-announce-collapse/badge.svg?branch=master
[coverage]: https://coveralls.io/github/tusharmath/react-announce-collapse?branch=master

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