<commit_before>## React Sliding Pane
Pane that slides out of the window side. Like panes from Google Tag Manager.

Features:
 * Animated open-close
 * Outside click or left top arrow click to close
 * Efficient: pane content is not rendered when pane is closed
 * Based on react-modal
 * Small — 2.5 Kb minified (+ react, react-modal)

See [changelog](https://dimitrydushkin.github.io/sliding-pane/CHANGELOG.md).

[![npm version](https://badge.fury.io/js/react-sliding-pane.svg)](https://badge.fury.io/js/react-sliding-pane)

[![Thanks to BrowserStack](docs/browserstack-logo.svg | width=300)](https://www.browserstack.com/)

### [Open demo](https://dimitrydushkin.github.io/sliding-pane/example.html)
[![Demo](docs/react-sliding-pane-screenshot.png | width=600)](https://dimitrydushkin.github.io/sliding-pane/example.html)

### When to use (UX)
I've found sliding pane very helpful in situations when normal modal window (or just popup) is not enough: long list with pagination, multi-step form or nested popups.

### How to use
Install module and peer dependencies:

`npm i --save react react-dom react-sliding-pane`

```js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Modal from 'react-modal';
import SlidingPane from 'react-sliding-pane';
import 'react-sliding-pane/dist/react-sliding-pane.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isPaneOpen: false,
            isPaneOpenLeft: false
        };
    }
<commit_msg>Up readme<commit_after>## React Sliding Pane
Pane that slides out of the window side. Like panes from Google Tag Manager.

Features:
 * Animated open-close
 * Outside click or left top arrow click to close
 * Efficient: pane content is not rendered when pane is closed
 * Based on react-modal
 * Small — 2.5 Kb minified (+ react, react-modal)

See [changelog](https://dimitrydushkin.github.io/sliding-pane/CHANGELOG.md).


[![npm version](https://badge.fury.io/js/react-sliding-pane.svg)](https://badge.fury.io/js/react-sliding-pane)

<a href="https://www.browserstack.com/">
    <img src="https://raw.githubusercontent.com/DimitryDushkin/sliding-pane/master/docs/browserstack-logo.svg" width="300" title="Thanks to BrowserStack" />
</a>

### [Open demo](https://dimitrydushkin.github.io/sliding-pane/example.html)
<a href="https://dimitrydushkin.github.io/sliding-pane/example.html">
    <img src="https://raw.githubusercontent.com/DimitryDushkin/sliding-pane/master/docs/react-sliding-pane-screenshot.png" width="600" />
</a>

### When to use (UX)
I've found sliding pane very helpful in situations when normal modal window (or just popup) is not enough: long list with pagination, multi-step form or nested popups.

### How to use
Install module and peer dependencies:

`npm i --save react react-dom react-sliding-pane`

```js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Modal from 'react-modal';
import SlidingPane from 'react-sliding-pane';
import 'react-sliding-pane/dist/react-sliding-pane.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isPaneOpen: false,
            isPaneOpenLeft: false
        };
    }

{'fraction_non_alphanumeric': 0.1327406499080319, 'fraction_numerical': 0.004904966278356836, 'mean_word_length': 3.9290030211480365, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 14, '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': '4054524', 'n_tokens_mistral': 1086, 'n_tokens_neox': 1054, 'n_words': 286}