# @irim/rc-sidebar

> react sidebar component

Latest version **1.1.3** (published 2020-04-29) · BSD-3-Clause license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @irim/rc-sidebar
pnpm add @irim/rc-sidebar
yarn add @irim/rc-sidebar
bun add @irim/rc-sidebar
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2020-04-29 |
| First published | 2020-04-01 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pluto |
| Maintainers | huarse |
| Keywords | sidebar |

## Links

- npm: https://www.npmjs.com/package/@irim/rc-sidebar
- Repository: git@git.code.tencent.com:berry/rc-sidebar
- npm.io page: https://npm.io/package/@irim/rc-sidebar

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2020-04-29
- 1.1.2 — 2020-04-15
- 1.1.1 — 2020-04-01
- 1.1.1-beta — 2020-04-01
- 1.1.0 — 2020-04-01
- 1.0.0 — 2020-04-01

## README

# React Component of Sidebar

![version](https://img.shields.io/npm/v/@irim/rc-sidebar)
![license](https://img.shields.io/npm/l/@irim/rc-sidebar)
![downloads](https://img.shields.io/npm/dw/@irim/rc-sidebar)

<!-- 组件截图 -->

## 快速使用

- `$ npm install @irim/rc-sidebar --save`

```js
import Sidebar from '@irim/rc-sidebar';

class Demo extends React.Component {
  state = {
    visible: false,
  };

  handleClick = () => {
    this.setState({ visible: !this.state.visible });
  }

  handleClose = (fromAction) => {
    this.setState({ visible: false });
  }

  render() {
    return (
      <div className="demo-container">
        <button className="toggle-btn" onClick={this.handleClick}>show</button>
        <button className="x-safe-node">I&apos;m safe node</button>
        <Sidebar visible={this.state.visible}
          onClose={this.handleClose} title="Title of Popup">
          <h4>I am content title</h4>
          <p>I am content body~~</p>
        </Sidebar>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
```

```scss
@import "~@irim/rc-sidebar/lib/index"; 
```

## API

| props          | desc                              | type              | required | default                    |
| -------------- | --------------------------------- | ----------------- | -------- | -------------------------- |
| title          | header title                      | string            | no       | `null`                     |
| defaultVisible | visible when init                 | boolean           | no       | -                          |
| visible        | visible of popup                  | boolean           | no       | -                          |
| onClose        | event for popup close             | function          | no       | noop                       |
| closable       | whether has close btn             | boolean           | no       | `true`                     |
| hasMask        | show mask when popup showing      | boolean           | no       | `false`                    |
| offsetTop      | offset of top                     | number            | no       | `0`                        |
| autoFocus      | auto focus to form element        | boolean           | no       | `false`                    |
| dir            | show direction                    | enum(right, left) | no       | `'right'`                  |
| cacheBody      | hold body when popup is hidden    | boolean           | no       | `true`                     |
| root           | root node for outer click         | DOMElement        | no       | #root or body              |
| safeNode       | safe node that ignore outer click | Array             | no       | `['.rc-sidebar-safenode']` |

### SCSS Variables

> 在引用样式前提前定义即可修改变量，以下为默认值

```scss
$rc-sidebar-color-header: #F2F2F2; // 头部背景色
$rc-sidebar-color-title: #666666; // 头部标题文字颜色
$rc-sidebar-color-primary: #EB8A00; // 关闭按钮 HOVER 颜色
$rc-sidebar-size-default: 600px; // 默认宽度
$rc-sidebar-size-min: 480px; // 最小宽度
$rc-sidebar-offset-top: 0; // 默认顶部距离
$rc-sidebar-offset-bottom: 1px; // 默认底部距离
$rc-sidebar-zindex: 1001; // 层高
```

## LICENSE

BSD-3-Clause License

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