open-index/open-npm huggingface dataset:
npm package: @suyoungj/react-layout-component
Description: - React에서 사용할 수 있는 레이아웃 컴포넌트를 제공하는 라이브러리입니다. - [npm](https://www.npmjs.com/package/@suyoungj/react-layout-component?activeTab=code) - [Docs](https://react-layout-component-documentation.vercel.app/)
Latest version: 1.3.13

# @suyoungj/react-layout-component

- React에서 사용할 수 있는 레이아웃 컴포넌트를 제공하는 라이브러리입니다.
- [npm](https://www.npmjs.com/package/@suyoungj/react-layout-component?activeTab=code)
- [Docs](https://react-layout-component-documentation.vercel.app/)

## 설치

```bash
# npm
npm i @suyoungj/react-layout-component

#yarn
yarn add @suyoungj/react-layout-component
```

# Layout

## Container

- 화면의 폭에 따라 컨텐츠의 최대 폭을 제한하고, 중앙에 배치합니다.
- `minWidth, maxWidth` 프로퍼티로 너비를 조절할 수 있습니다.

```tsx
<Container minWidth={300} maxWidth={960}>
  <div>Content</div>
</Container>
```

## Flex

- CSS Flexbox를 사용하여 자식 컴포넌트들을 유연하게 배열하는 컴포넌트입니다.
- direction, justify, align 프로퍼티로 통해 배열 방향과 정렬을 조절할 수 있습니다.
- `gap` 속성을 통해 자식 컴포넌트 간의 간격을 조절할 수 있습니다.

```tsx
<Flex direction="row" justify="center" align="center" gap={5}>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Flex>
```

## Grid

- `rows, columns` 속성을 통해 격자의 형태를 지정할 수 있습니다.
- `gap` 속성을 통해 자식 컴포넌트 간의 간격을 조절할 수 있습니다.

```tsx
<Grid rows={3} columns={3} gap={10}>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
  <div>Content 5</div>
  <div>Content 6</div>
  <div>Content 7</div>
  <div>Content 8</div>
  <div>Content 9</div>
</Grid>
```

# Overlay

## Drawer

- Drawer는 화면 가장자리에서 슬라이드되는 패널입니다.
- 사용자가 현재 페이지를 벗어나지 않고 작업하거나 세부 정보를 확인해야 할 때 유용합니다.

```tsx
() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(() => false);
  };

  return (
    <Drawer isOpen={isOpen} onClose={handleClose}>
      <h1>Drawer</h1>
    </Drawer>
  );
};
```
npm package: @suyoungj/react-simple-modal-ts
Description: A simple & customizable modal component for React with TypeScript support.
Latest version: 1.0.1

# @suyoungj/react-simple-modal-ts

A simple & customizable modal component for React with TypeScript support.

## Installation

```shell
# npm
npm i @suyoungj/react-simple-modal-ts

# yarn
yarn add @suyoungj/react-simple-modal-ts

```

## Imports

```tsx
import { Modal, useModal } from '@suyoungj/react-simple-modal-ts';
```

## Usage

The `useModal` hook provides an easy way to manage the state of the modal.
It returns an object with:

- `isModalOpen`: a boolean that indicates whether the modal is currently open.
- `openModal`: a function that opens the modal.
- `closeModal`: a function that closes the modal.

## Props

The `Modal` component accepts the following props:

- `isModalOpen` (required): a boolean that indicates whether the modal is currently open.
- `onCloseModal` (required): a function that is called when the modal is closed. This function should set the isModalOpen state to false.

```tsx
function ModalExample() {
  const { isModalOpen, openModal, closeModal } = useModal();

  return (
    <>
      <button onClick={openModal}>Open Modal</button>
      <Modal isModalOpen={isModalOpen} onCloseModal={closeModal}>
        {/* Modal Content Here */}
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Modal>
    </>
  );
}

export default ModalExample;
```

## Example

![화면_기록_2023-05-08_오전_11_11_40_AdobeExpress](https://user-images.githubusercontent.com/19235163/236719238-ded91724-efef-4239-888d-d82de10eb034.gif)

## Features

- Closed by clicking the backdrop
- Closed when the Esc key is pressed

## Dependencies

- `React` (^17.0.2 or higher)
- `TypeScript` (^4.3.5 or higher)
- `styled-components` (^5.3.0 or higher)
npm package: @suyoungj/simple-modal
Description: 간단한 모달을 구현할 수 있는 라이브러리입니다.
Latest version: 0.0.4

# MyModal 모달 라이브러리

간단한 모달을 구현할 수 있는 라이브러리입니다.

## 설치 방법

```sh
npm install @suyoungj/simple-modal
```

## 사용 방법

### MyModal 컴포넌트 불러오기

```js
import Modal from 'makerjun-sample-modal';
```

### MyModal 사용하기

```js
<MyModal trigger={<button>모달 열기</button>}>
	<h2>제목</h2>
	<p>내용</p>
</MyModal>
```

## Props

trigger: 모달을 열기 위한 요소. React element 형태로 전달합니다.
children: 모달 내부에 들어갈 컨텐츠입니다.

### Props 예시

```js
import MyModal from 'my-modal-library';

function App() {
	return (
		<div>
			<MyModal trigger={<button>모달 열기</button>}>
				<h2>제목</h2>
				<p>내용</p>
			</MyModal>
		</div>
	);
}

export default App;
```