open-index/open-npm huggingface dataset:
npm package: @lani.ground/react-image-viewer
Description: A React component for viewing images in a modal
Author: Lani
Latest version: 1.2.1

# react-image-viewer

![npm](https://img.shields.io/npm/v/%40lani.ground%2Freact-image-viewer)

Image Viewer for viewing images inside react components

[Demo](https://laniground.com/playground/react-image-viewer)

## Example

![Viewer Example](https://laniground.com/assets/example/react-image-viewer-example.gif)

## Installation

```bash
npm install @lani.ground/react-image-viewer

// or

yarn add @lani.ground/react-image-viewer
```

## Usage

```tsx
import { ImageViewerProvider } from '@lani.ground/react-image-viewer';
import '@lani.ground/react-image-viewer/css';

<ImageViewerProvider
  controller={{
    prev: (
      <button type="button" onClick={() => console.log('prev')}>
        prev
      </button>
    ),
    next: <button type="button" onClick={() => console.log('next')}></button>,
  }}
  disabledGallery={false}
>
  ...
</ImageViewerProvider>;
```

## Props

| Name                 | type                                                     | description                                                                                                                                    |
| -------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| controller(optional) | {<br />next: JSX.Element;<br />prev: JSX.Element;<br />} | To customize the arrow, pass the element through the controller props<br /> 화살표를 커스텀하려면 JSX.Element를 controller props에 전달합니다. |
| disabledGallery(optional) | boolean(default: false)  | Check to disable gallery mode (switches to single image viewer upon deactivation)<br /> 갤러리 모드를 해제할지 여부(해제시 단일 이미지 뷰어로 전환됩니다.) |
npm package: @lani.ground/react-outside-click-handler
Description: Handler components that make it easier to control when you click on a component other than the one you want.
Author: Lani
Latest version: 1.1.2

# react-outside-click-handler


![npm version](https://img.shields.io/npm/v/%40lani.ground/react-outside-click-handler)

Handler component that make it easier to control when you click on a component other than the one you want.

[Demo](https://laniground.com/playground/react-outside-click-handler)

## Example

![Outside click handler Example](https://laniground.com/assets/example/outside_click_handler_example.gif)

## Installation

``` bash
npm install @lani.ground/react-outside-click-handler

// or

yarn add @lani.ground/react-outside-click-handler
```

## Usage

``` tsx
import { OutsideClickHandler } from "@lani.ground/react-outside-click-handler";

const [selectedOption, setSelectedOption] = useState<string>("");
const [isOpen, setIsOpen] = useState<boolean>(false);

const OPTIONS = ["option1", "option2", "option3"];

<button type="button" onClick={() => setIsOpen(true)}>
  Click Me
</button>

{
  isOpen && (
    <OutsideClickHandler onOutsideClick={() => setIsOpen(false)}>
      <ul className="bg-gray-500 px-5">
        {OPTIONS.map((option) => (
          <li>
            <button
              type="button"
              onClick={() => {
                setIsOpen(false);
              }}
            >
              {option}
            </button>
          </li>
        ))}
      </ul>
    </OutsideClickHandler>
  );
}

<p>
  selected: <strong>{selectedOption}</strong>
</p>
```

## Props

| Name                            | Type        | Description                                                                                                                            |
| ------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| onOutsideClick<b>(required)</b> | () => void  | Function called when a click occurs outside the consumer's area<br /> 소비자 컴포넌트의 영역을 제외한 영역을 클릭했을 때 호출되는 함수 |
| children<b>(required)</b>       | JSX.Element | Consumer Component<br /> 소비자 컴포넌트                                                                                               |
| disabled<b>(optional)</b>       | boolean(default: false) | ouside click disabled<br /> 외부 영역 클릭 비활성화 |                                                                      |
| capture<b>(optional)</b>       | boolean(default: true) | Whether capturing is enabled<br /> 캡처링 사용 여부 |
npm package: @laniakeasupercluster/chain-depict
Description: 受到 pug 和  tailwind, windicss 启发的, 使用纯粹 js 书写 UI
Author: Laniakea Supercluster
Latest version: 0.0.1

# chain-depict

受到 pug 和 tailwind, windicss 启发的,
使用纯粹 js 书写 UI

0. 创建一个 dom 对象, 每次操作都返回它自身从而能够链式操作
1. 提高文字的屏幕占比, 更少的屏幕空间表达更多的描述
2. 减少文字输入, 省略不必要的属性描述冗余
3. 响应式元素绑定, 数据变化则ui跟随变化


### install

```bash
npm i @laniakeasupercluster/chain-depict
```

```javascript
import { div } form '@laniakeasupercluster/chain-depict'

div.w(12).h(14).onclick.stop(click).onkeydown.esc(keydown)([
    div.w('auto').h(32).classList(['mdui-btn', 'mdui-btn-icon']),
    div.w('auto').h(32).classList('mdui-btn mdui-btn-icon'),
])
```

### dev

```bash
git clone git@git.satori.love:LaniakeaSupercluster/chain-depict.git
npm i
npm run dev
```


### doc

```javascript
import { div } form '@laniakeasupercluster/chain-depict'

// 宽高(width height)
div.w(32).h(32)         // 使用数字
div.w('32px').h('32em') // 使用文本

// 边距(margin padding)
div.m(32).p(32)            // 使用数字
div.m('32px').p('32px')    // 使用文本
div.m({ top:32, left:12 }) // 使用对象
div.m([ 32, 12 ])          // 使用数组

// 绝对定位(absolute)
div.absolute({ top: 12, left:'2rem' })      // 使用对象
div.absolute([ 12, '12px', '2rem', '4em' ]) // 使用数组

// 过渡动画(如果声明了且没有指定具体属性, 那么默认所有类型都动画过渡)
div.transition()

// hover
div.hover(event => event.element.w(12).h(24))

// click
div.click(event => event.element.w(12).h(24))

```