# creative-cp-bubble-sidebar

> A creative component named BubbleSidebar.

Latest version **1.2.2** (published 2019-06-05) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install creative-cp-bubble-sidebar
pnpm add creative-cp-bubble-sidebar
yarn add creative-cp-bubble-sidebar
bun add creative-cp-bubble-sidebar
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2019-06-05 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 97.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Yue Yang |
| Maintainers | g1eny0ung |
| Keywords | creative, component, sidebar, react |

## Links

- npm: https://www.npmjs.com/package/creative-cp-bubble-sidebar
- Repository: https://github.com/creative-components/bubble-sidebar
- Homepage: https://github.com/creative-components/bubble-sidebar#readme
- Issues: https://github.com/creative-components/bubble-sidebar/issues
- npm.io page: https://npm.io/package/creative-cp-bubble-sidebar

## 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

- 1.2.2 (latest) — 2019-06-05
- 1.2.1 — 2019-06-04
- 1.2.0 — 2019-05-13
- 1.0.3 — 2019-05-02
- 1.0.2 — 2019-04-22
- 1.0.1 — 2019-03-22
- 1.0.0 — 2019-03-17

## README

# bubble-sidebar (React)

![David](https://img.shields.io/david/peer/creative-components/bubble-sidebar.svg)
![David](https://img.shields.io/david/dev/creative-components/bubble-sidebar.svg)
![npm](https://img.shields.io/npm/v/creative-cp-bubble-sidebar.svg)
![NPM](https://img.shields.io/npm/l/creative-cp-bubble-sidebar.svg)

A creative component named BubbleSidebar.

## Idea from

[https://dribbble.com/shots/6094093-Dashboard-sidemenu-exploration](https://dribbble.com/shots/6094093-Dashboard-sidemenu-exploration)

## Website

[https://creative-components.github.io/bubble-sidebar/](https://creative-components.github.io/bubble-sidebar/)

## Screenshot | Demo

[https://codepen.io/g1eny0ung/pen/JzvvzE](https://codepen.io/g1eny0ung/pen/JzvvzE)

## How to use

```sh
npm i creative-cp-bubble-sidebar --save
// or
yarn add creative-cp-bubble-sidebar
```

## Docs

### import

```js
// ES Modules
import BubbleSidebar from 'creative-cp-bubble-sidebar'
// CSS
import 'node_modules/creative-cp-bubble-sidebar/style/BubbleSidebar.css'
// SCSS
import 'node_modules/creative-cp-bubble-sidebar/src/BubbleSidebar.scss'

// Common JS
const BubbleSidebar = require('creative-cp-bubble-sidebar')
```

For browser use:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/creative-cp-bubble-sidebar/style/BubbleSidebar.css"
/>

...

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/creative-cp-bubble-sidebar"></script>
```

See [./docs/index.html](./docs/index.html) for more details.

### Props

```js
defaultProps = {
  attached: false,
  width: 'normal',
  color: '#fff',
  background: '#000',
  sliderBackground: '#fff',
  activeIndex: 0,
  activeColor: '#000'
}
```

#### BubbleSidebar.attached

> Tell BubbleSidebar is or not attach itself to container's left.

#### BubbleSidebar.width

> BubbleSidebar's width. <br />
> Three options: `thin`, `normal`, `wide`

#### BubbleSidebar.color

> BubbleSidebar CSS Style: `color`.

#### BubbleSidebar.background

> BubbleSidebar CSS Style: `background`.

#### BubbleSidebar.sliderBackground

> BubbleSidebar's slider CSS Style: `background`.

#### BubbleSidebar.activeIndex

> Tell BubbleSidebar which index of item will render at first.

#### BubbleSidebar.activeColor

> Active item color of BubbleSidebar.

#### BubbleSidebar.onClick

> Click event of BubbleSidebar.

# License

Distributed under the The MIT License (MIT).

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