# react-hammer

> reactjs-hammerjs ================

Latest version **0.0.3** (published 2014-08-22) · 0 weekly downloads

## Install

```sh
npm install react-hammer
pnpm add react-hammer
yarn add react-hammer
bun add react-hammer
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2014-08-22 |
| First published | 2014-08-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | lapanoid |

## Links

- npm: https://www.npmjs.com/package/react-hammer
- npm.io page: https://npm.io/package/react-hammer

## Dependencies (8)

- [react](https://npm.io/package/react.md) ~0.11.1
- [lodash](https://npm.io/package/lodash.md) latest
- [moment](https://npm.io/package/moment.md) latest
- [gulp-git](https://npm.io/package/gulp-git.md) ^0.5.0
- [gulp-print](https://npm.io/package/gulp-print.md) ^1.1.0
- [gulp-filter](https://npm.io/package/gulp-filter.md) ^1.0.0
- [gulp-prompt](https://npm.io/package/gulp-prompt.md) ^0.1.1
- [gulp-tag-version](https://npm.io/package/gulp-tag-version.md) ^1.0.2

## Recent versions

- 0.0.3 (latest) — 2014-08-22
- 0.0.2 — 2014-08-20

## README

reactjs-hammerjs
================

reactjs hammerjs integration with animations

## How to use it?
* Download this repo 
* cd to it
* cast [python -m SimpleHTTPServer [port]](http://stackoverflow.com/a/532710)
* and open http://localhost:[port]/examples/reacthammer.html 

it is not really well structured (actually bad, I just put everything that I have for this moment in one example) but u can click and figure out what happens

## hammerjs
This example inspired by [old hammer](https://github.com/thecoded/hammer.js) (new hammer is a way too different for me to understand and use it here) especially by this [page](http://thecoded.com/swipe/examples/events.html) which was extremely useful during testing events support on mobile phones.

## reactjs 
I did not find proper [syntatic touch events](http://facebook.github.io/react/docs/events.html#touch-events) support in react yet as I want to be able to use all hammer suported events:

"touch", "release", "hold", "tap", "doubletap", "dragstart", "drag", "dragend", "dragleft", "dragright", "dragup", "dragdown", "swipe", "swipeleft", "swiperight", "swipeup", "swipedown", "transformstart", "transform", "transformend", "rotate", "rotateleft", "rotateright", "pinch", "pinchin", "pinchout"

Cause hammer use real dom nodes react will weaken by this.getDOMNode() calls, but it still reeeeeealy fast.  

## HitArea
HitArea is a main react component  of this repo it can log self on EventsPane just like that

```javascript
React.renderComponent(         
       <HitArea eventsPane="true"/>,
    $('#example')[0]
);
```

HitArea is transcludable u can use it like that: 

```javascript
React.renderComponent(         
        <HitArea>
            <BlinkingThing color="red" blinkBack="100" blinkTo="100" >
                <div style={{width: '200px', height: '200px'}}></div>
            </BlinkingThing>
        </HitArea>,
    $('#example')[0]
);
```

It tries to pass all hammer events to childs if they have receiveHammerEvent method

U can restrict HitArea to observe only some of events like that:

```javascript
React.renderComponent(         
       <HitArea events={["dragstart", "drag", "dragend"]}>
         ...
      </HitArea>,
    $('#example')[0]
);
```

## reactjs animate
I animate examples using that [thing](https://github.com/pleasetrythisathome/react.animate) it depends on [d3](http://d3js.org/)

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