react-toastify - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #llm #macos #java #windows #cli #awesome-list #mcp #ios #openai #open-source

react-toastify

(★ 13,436)

손쉬운 React 알림 기능 구현 🚀!

파일 탐색기

최종 버전 다운로드 (.zip)

- - build.yaml
- FUNDING.yml
- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE.md
- - commands.ts
  - component-index.html
  - component.ts
  - style.css
- - package.json
- - vite.svg
- - index.css
  - main.tsx
  - vite-env.d.ts
- .eslintrc.cjs
- .gitignore
- index.html
- package.json
- pnpm-lock.yaml
- tsconfig.json
- tsconfig.node.json
- vite.config.ts
- - CloseButton.cy.tsx
  - CloseButton.tsx
  - Icons.cy.tsx
  - Icons.tsx
  - index.tsx
  - ProgressBar.cy.tsx
  - ProgressBar.tsx
  - StyledToastContainer.cy.tsx
  - StyledToastContainer.tsx
  - Toast.cy.tsx
  - Toast.tsx
  - ToastContainer.tsx
  - Transitions.tsx
- - containerObserver.ts
  - genToastId.ts
  - index.ts
  - store.ts
  - toast.cy.tsx
  - toast.ts
- - index.ts
  - useIsomorphicLayoutEffect.ts
  - useStyleSheet.ts
  - useToast.ts
  - useToastContainer.ts
- - collapseToast.ts
  - constant.ts
  - cssTransition.tsx
  - index.ts
  - mapper.ts
  - propValidator.ts
- css.d.ts
- index.ts
- style.css
- tests.cy.tsx
- types.ts
- unstyled.ts
.gitignore
.nycrc.json
CLAUDE.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
cypress.config.ts
lefthook.yml
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
tsconfig.json
tsup.config.ts
vite.config.mts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/fkhadra/react-toastify

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-toastify

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ npm install --save react-toastify

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

$ yarn add react-toastify

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React-Toastify
[![Financial Contributors on Open Collective](https://opencollective.com/react-toastify/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-toastify) ![React-toastify CI](https://github.com/fkhadra/react-toastify/workflows/React-toastify%20CI/badge.svg)
![npm](https://img.shields.io/npm/dm/react-toastify.svg?label=%E2%8F%ACdownloads&style=for-the-badge)
![npm](https://img.shields.io/npm/v/react-toastify.svg?style=for-the-badge)
![NPM](https://img.shields.io/npm/l/react-toastify.svg?label=%F0%9F%93%9Clicense&style=for-the-badge)
![Coveralls github](https://img.shields.io/coveralls/github/fkhadra/react-toastify.svg?label=%E2%9B%B1coverage&style=for-the-badge)
![React toastify](https://user-images.githubusercontent.com/5574267/130804494-a9d2d69c-f170-4576-b2e1-0bb7f13dd92d.gif "React toastify")
![stacked](https://github.com/fkhadra/react-toastify/assets/5574267/975c7c01-b95e-43cf-9100-256fa8ef2760)
![custom-style](https://github.com/user-attachments/assets/311672f7-f98a-46f3-a2ab-a9d1a05186a7)
🎉 React-Toastify를 사용하면 앱에 알림을 손쉽게 추가할 수 있습니다.
## 설치 (Installation)
```
$ npm install --save react-toastify
$ yarn add react-toastify
```
```jsx
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
function App(){
const notify = () => toast("Wow so easy!");
return (

Notify!

);
}
```
## 문서
시작하려면 [documentation](https://fkhadra.github.io/react-toastify/introduction)을 확인하세요!
## 주요 기능
- 정말로 설정하기 쉬우며, 10초 안에 작동하게 만들 수 있습니다!
- 매우 간편한 커스터마이징
- RTL 지원
- 스와이프하여 닫기 👌
- 스와이프 방향 선택 가능
- 원하는 애니메이션을 매우 쉽게 사용 가능. 예를 들어 animate.css와 잘 작동합니다.
- toast 내부에 react 컴포넌트를 표시할 수 있습니다!
- ```onOpen``` 및 ```onClose``` 훅을 지원합니다. 두 훅 모두 toast 내부에 렌더링된 react 컴포넌트에 전달된 prop에 접근할 수 있습니다.
- 코드를 통해 프로그래밍 방식으로 toast를 제거할 수 있습니다.
- toast별로 동작 정의 가능
- 창이 포커스를 잃을 때 toast 일시 정지 👁
- 남은 시간을 보여주는 멋진 진행 표시줄
- toast 업데이트 기능
- `nprogress`처럼 진행 표시줄을 제어할 수 있습니다 😲
- 동시에 표시되는 toast의 개수를 제한할 수 있습니다.
- 다크 모드 🌒
- 프로그래밍 방식으로 타이머 일시 정지 가능
- 스택형 알림!
- 그리고 훨씬 더 많은 기능들!
## 데모
[백 마디 말보다 한 번의 데모가 낫습니다](https://fkhadra.github.io/react-toastify/introduction)
## 기여하기
⭐을 눌러 여러분의 ❤️과 지원을 보여주세요. 어떤 제안이든 환영합니다! 기여 가이드(contributing guide)를 확인해 보세요.
또한 [reactiflux](https://www.reactiflux.com/)에서도 저를 찾으실 수 있습니다. 제 닉네임은 Fadi입니다.
## 기여자들
### 코드 기여자
이 프로젝트는 기여해주신 모든 분들 덕분에 존재합니다. [[Contribute](CONTRIBUTING.md)].
[![](https://opencollective.com/react-toastify/contributors.svg?width=890&button=false)](https://github.com/fkhadra/react-toastify/graphs/contributors)
### 재정적 기여자
재정적 기여자가 되어 커뮤니티를 유지할 수 있도록 도와주세요. [[Contribute](https://opencollective.com/react-toastify/contribute)]
#### 개인 기여자
[![](https://opencollective.com/react-toastify/individuals.svg?width=890)](https://opencollective.com/react-toastify)
#### 단체 기여자
조직으로 이 프로젝트를 지원하세요. 여기에 로고와 웹사이트 링크가 표시됩니다. [[Contribute](https://opencollective.com/react-toastify/contribute)]
[![](https://opencollective.com/react-toastify/organization/0/avatar.svg)](https://opencollective.com/react-toastify/organization/0/website)
[![](https://opencollective.com/react-toastify/organization/1/avatar.svg)](https://opencollective.com/react-toastify/organization/1/website)
[![](https://opencollective.com/react-toastify/organization/2/avatar.svg)](https://opencollective.com/react-toastify/organization/2/website)
[![](https://opencollective.com/react-toastify/organization/3/avatar.svg)](https://opencollective.com/react-toastify/organization/3/website)
[![](https://opencollective.com/react-toastify/organization/4/avatar.svg)](https://opencollective.com/react-toastify/organization/4/website)
[![](https://opencollective.com/react-toastify/organization/5/avatar.svg)](https://opencollective.com/react-toastify/organization/5/website)
[![](https://opencollective.com/react-toastify/organization/6/avatar.svg)](https://opencollective.com/react-toastify/organization/6/website)
[![](https://opencollective.com/react-toastify/organization/7/avatar.svg)](https://opencollective.com/react-toastify/organization/7/website)
[![](https://opencollective.com/react-toastify/organization/8/avatar.svg)](https://opencollective.com/react-toastify/organization/8/website)
[![](https://opencollective.com/react-toastify/organization/9/avatar.svg)](https://opencollective.com/react-toastify/organization/9/website)
## 릴리스 노트
최신 릴리스에 대한 릴리스 노트는 [여기](https://github.com/fkhadra/react-toastify/releases/latest)에서 확인하실 수 있습니다.
전체 릴리스 노트는 [여기](https://github.com/fkhadra/react-toastify/releases)에서 찾아볼 수 있습니다.
## 라이선스
MIT 라이선스에 따라 라이선스가 부여됩니다.