# hf-lightbox

> yarn add hf-lightbox

Latest version **1.0.8** (published 2019-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install hf-lightbox
pnpm add hf-lightbox
yarn add hf-lightbox
bun add hf-lightbox
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2019-12-24 |
| First published | 2019-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 20.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | hfchou |
| Maintainers | hfchou |

## Links

- npm: https://www.npmjs.com/package/hf-lightbox
- Repository: https://github.com/hsiaofung/scrollableLightbox
- Homepage: https://github.com/hsiaofung/scrollableLightbox#readme
- Issues: https://github.com/hsiaofung/scrollableLightbox/issues
- npm.io page: https://npm.io/package/hf-lightbox

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^16.12.0
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [babel-core](https://npm.io/package/babel-core.md) ^7.0.0-bridge.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.5.5
- [react-scripts](https://npm.io/package/react-scripts.md) 3.2.0
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1

## Recent versions

- 1.0.8 (latest) — 2019-12-24
- 1.0.7 — 2019-12-24
- 1.0.6 — 2019-11-21
- 1.0.5 — 2019-11-19
- 1.0.4 — 2019-11-19
- 1.0.3 — 2019-11-19
- 1.0.2 — 2019-11-17
- 1.0.1 — 2019-11-17

## README

## 安裝

yarn add hf-lightbox

## 元件

```javascript
<ScrollableLightbox>
```

## 特性

支援 RWD: 手機，平板<br />
支援動畫，web 版由上到下，手機版右進右出。<br />

## 屬性

show : 顯示/關閉 lightbox<br />
close : close btn 事件的 callback<br />
title : lightbox 的 title<br />

## CSS

.lightbox-close-btn : 可以更換 close btn 的圖形。<br />
.lightbox-header .lightbox-title : 可以設定標題的樣式。<br />
.lightbox-content : 可以設定內容的樣式。<br />
.lightbox-visible : 可以是設定 lightbox 顯示的動畫。<br />
.lightbox-hidden : 可以是設定 lightbox 消失的動畫。<br />

## demo

```javascript
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import ScrollableLightbox from "./ScrollableLightbox";

class App extends React.Component {
  state = { show: false };
  click() {
    this.setState({
      show: true
    });
  }
  close() {
    this.setState({
      show: false
    });
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.click.bind(this)}> Click </button>
        <ScrollableLightbox
          show={this.state.show}
          close={this.close.bind(this)}
          title={"分店位置"}
        >
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing
              elit.Distinctio possimus dignissimos eos temporibus magni!A
              deleniti maiores iusto voluptate!Reiciendis dolor animi
              repellendus ut.Error qui id, voluptatem quod nihil.
            </p>
            <p>
              Asperiores esse tempore quasi quibusdam, provident vel voluptatum
              nisi sed fugiat quos molestias, doloremque placeat quia
              dignissimos expedita soluta cum alias autem delectus tenetur
              perspiciatis deserunt voluptate, debitis.Asperiores, eius ?
            </p>
          </div>
        </ScrollableLightbox>
      </div>
    );
  }
}

export default App;
```

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