# jackreact-sliding-side-panel

> A sliding panel for React applications

Latest version **2.0.7** (published 2023-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install jackreact-sliding-side-panel
pnpm add jackreact-sliding-side-panel
yarn add jackreact-sliding-side-panel
bun add jackreact-sliding-side-panel
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.7 |
| Published | 2023-06-02 |
| First published | 2023-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | Benedicte Giraud |
| Maintainers | jackhou147 |
| Keywords | react, npm, module, node, sliding, side, pane, panel, menu |

## Links

- npm: https://www.npmjs.com/package/jackreact-sliding-side-panel
- Repository: https://github.com/BenedicteGiraud/react-sliding-side-panel
- Homepage: https://github.com/BenedicteGiraud/react-sliding-side-panel#readme
- Issues: https://github.com/BenedicteGiraud/react-sliding-side-panel/issues
- npm.io page: https://npm.io/package/jackreact-sliding-side-panel

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.7 (latest) — 2023-06-02
- 2.0.6 — 2023-06-02
- 2.0.5 — 2023-06-02
- 2.0.4 — 2023-06-02
- 2.0.3 — 2023-06-02

## README

# react-sliding-side-panel

# [Demo](https://benedictegiraud.github.io/react-sliding-side-panel/)

# Installation and usage

The easiest way to use react-sliding-side-panel is to install it from npm and build it into your app with Webpack.

```
npm install --save react-sliding-side-panel
```

Then use it in your app:

```js
import React, { useState } from 'react';
import SlidingPanel from 'react-sliding-side-panel';
import 'react-sliding-side-panel/lib/index.css';

const App = () => {
  const [openPanel, setOpenPanel] = useState(false);
  return (
    <div>
      <div>
        <button onClick={() => setOpenPanel(true)}>Open</button>
      </div>
      <SlidingPanel
        type={'left'}
        isOpen={openPanel}
        size={30}
      >
        <div>
          <div>My Panel Content</div>
          <button onClick={() => setOpenPanel(false)}>close</button>
        </div>
      </SlidingPanel>
    </div>
  );
};

export default App;
```

- [Example with typescript](https://github.com/BenedicteGiraud/react-sliding-side-panel/tree/master/examples/example2-typescript)
- [Example with nextJS](https://github.com/BenedicteGiraud/react-sliding-side-panel/tree/master/examples/example3-nextjs)

## Props

Common props you may want to specify include:

- `type` - left | right | top | bottom, specify the sliding panel position
- `size` - number between 0 and 100, specify the sliding panel size in percentage of the page size
- `isOpen` - boolean, open or close the sliding panel

This component uses [CSSTransition](http://reactcommunity.org/react-transition-group/css-transition) under the hood, so you can also specify the following props:

- `panelContainerClassName` - an optional additional classname for the panel container
- `panelClassName` - an optional additional classname for the panel content
- `noBackdrop` - an optional boolean to set to true if you don't want a backdrop panel
- `onOpen` - Similar to [onEnter](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onEnter)
- `onOpening` - Similar to [onEntering](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onEntering)
- `onOpened` - Similar to [onEntered](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onEntered)
- `onClose` - Similar to [onExit](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onExit)
- `onClosing` - Similar to [onExiting](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onExiting)
- `onClosed` - Similar to [onExited](http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-onExited)
- `backdropClicked` - Callback called when the backdrop is clicked

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