<commit_before># React-Touch
[![Build Status](https://img.shields.io/travis/phil303/react-touch/master.svg?style=flat)](https://travis-ci.org/phil303/react-touch)
[![codecov.io](https://codecov.io/github/phil303/react-touch/coverage.svg?branch=master)](https://codecov.io/github/phil303/react-touch?branch=master)
[![NPM Version](https://img.shields.io/npm/v/react-touch.svg?style=flat)](https://www.npmjs.com/package/react-touch) 

React-Touch is a set of wrapper components that handle touch events in a more declarative way. This library is still a WIP - test coverage is good but the API is probably going to shift in the comings days. 

Here's a quick example of the API.

```jsx
import { Holdable } from 'react-touch';
<Holdable onHoldComplete={handleHold}>
  ({ holdProgress }) => <Button style={{opacity: holdProgress}} />
</Holdable>
```

## Try it out
```
npm install react-touch --save
```

## What Does This Library Do?
If you've ever written mobile web software, then you might've found yourself needing the ability to touch drag a component, measure a hold, or handle a swipe. This library aims to make all that simpler by abstracting away the details so you can wrap your component and move on.

## API
Exports:
  
  - [`defineHold`](#defineholdconfig-object)
  - [`defineSwipe`](#defineswipeconfig-object)
  - [`Holdable`](#holdable-)
  - [`Draggable`](#draggable-)
  - [`Swipeable`](#swipeable-)
  - [`CustomGesture`](#customgesture-)

### Helpers

#### `defineHold(config?: Object)`

Used in conjuction with `Holdable`, `defineHold` is an optional helper function that creates a configuration for your holdable component. The arguments to it are:

  - `config`: Optional. Object with the following keys:
    - `updateEvery`: Optional. Defaults to 250. Units are in milliseconds.
    - `holdFor`: Optional. Defaults to 1000. Units are in milliseconds.

#### Example Usage
```jsx
const hold = defineHold({updateEvery: 50, holdFor: 500});
<Holdable config={hold} onHoldComplete={handleHold}><commit_msg>add a link to the smartphone example in readme<commit_after># React-Touch
[![Build Status](https://img.shields.io/travis/phil303/react-touch/master.svg?style=flat)](https://travis-ci.org/phil303/react-touch)
[![codecov.io](https://codecov.io/github/phil303/react-touch/coverage.svg?branch=master)](https://codecov.io/github/phil303/react-touch?branch=master)
[![NPM Version](https://img.shields.io/npm/v/react-touch.svg?style=flat)](https://www.npmjs.com/package/react-touch) 

React-Touch is a set of wrapper components that handle touch events in a more declarative way. This library is still a WIP - test coverage is good but the API is probably going to shift in the comings days. 

Here's a quick example of the API.

```jsx
import { Holdable } from 'react-touch';
<Holdable onHoldComplete={handleHold}>
  ({ holdProgress }) => <Button style={{opacity: holdProgress}} />
</Holdable>
```

## Try it out
```
npm install react-touch --save
```

## Demos

  - [Emulating a Smartphone Dashboard](http://phil303.github.io/react-touch/examples/smartphone-dashboard/)

## What Does This Library Do?
If you've ever written mobile web software, then you might've found yourself needing the ability to touch drag a component, measure a hold, or handle a swipe. This library aims to make all that simpler by abstracting away the details so you can wrap your component and move on.

## API
Exports:
  
  - [`defineHold`](#defineholdconfig-object)
  - [`defineSwipe`](#defineswipeconfig-object)
  - [`Holdable`](#holdable-)
  - [`Draggable`](#draggable-)
  - [`Swipeable`](#swipeable-)
  - [`CustomGesture`](#customgesture-)

### Helpers

#### `defineHold(config?: Object)`

Used in conjuction with `Holdable`, `defineHold` is an optional helper function that creates a configuration for your holdable component. The arguments to it are:

  - `config`: Optional. Object with the following keys:
    - `updateEvery`: Optional. Defaults to 250. Units are in milliseconds.
    - `holdFor`: Optional. Defaults to 1000. Units are in milliseconds.

#### Example Usage
```jsx
const hold = defineHold({updateEvery: 50, holdFor: 500});
<Holdable config={hold} onHoldComplete={handleHold}>
{'fraction_non_alphanumeric': 0.13753581661891118, 'fraction_numerical': 0.012177650429799427, 'mean_word_length': 4.746227709190672, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3329819', 'n_tokens_mistral': 1383, 'n_tokens_neox': 1250, 'n_words': 406}