🧄 Garlic-Toast

Garlic-Toast는 다른 Toast 라이브러리의 장점들을 한데 모아, 하나의 라이브러리로 편하고 다양한 토스트 기능을 제공해주는 라이브러리입니다.

🕹️ Demo Site

[Demo Site] Garlic-Toast의 여러 옵션들을 확인하시고, 직접 테스트 해보실 수 있습니다.

🪛 Installation

# npm
npm install garlic-toast
# yarn
yarn add garlic-toast
# pnpm
pnpm add garlic-toast

🪄 Basic Usage

import { ToastContainer, toast } from 'garlic-toast'; 
import 'garlic-toast/style.css'; // CSS 스타일 파일

function App() {
  const alert = () => toast.alert('토스트 출력!')

  return (
    <div>
      <button onClick={alert}>Toast</button>
      <ToastContainer position="t-r" time={5000} />
    </div>
  );
}

🍞 ToastContainer

<ToastContainer isFold position="t-r" time={5000} />

poistion="위치"   # 기본 출력위치 (필수)
time={ms}         # 기본 출력 유지시간 (필수)
isFold            # 토스트 겹쳐서 출력되는 스타일 (선택)

App.jsx or App.tsx 파일에 추가하시는걸 권장드립니다.

🥪 Toast

toast.타입(메세지 내용, {옵션})

1️⃣ Type

Basic Type

1. alert        # 기본적인 알럿 방식입니다.
2. success      # event가 성공했을 경우 사용을 권장드립니다.
3. error        # event가 실패했을 경우 사용을 권장드립니다.
4. warning      # 경고메시지를 전달 할 경우 사용을 권장드립니다.
5. info         # 정보를 전달 할 경우 사용을 권장드립니다.

Special Type - confirm

toast.confirm(메세지 내용).then(isConfirm => {
  if (isConfirm) {
    // 확인 클릭 시 실행
  } else {
    // 취소 클릭 시 실행
  }
})

2️⃣ Options

1. position

toast.alert('토스트 메시지', {
  position: "t-r"
})

top, center, bottom과 left, center, right를 조합하여 토스트의 위치를 설정할 수 있습니다. | | | | | :-: | :-: | :-: | | t-l | t-c | t-r | | c-l | c-c | c-r | | b-l | b-c | b-r |

2. textColor

toast.alert('토스트 메시지', {
  textColor: "#000000"
})

글자의 색상을 설정합니다.

3. color

toast.alert('토스트 메시지', {
  color: "#ffffff"
})

알림의 배경색을 설정합니다.

4. closeOnClick

toast.alert('토스트 메시지', {
  closeOnClick: true/false
})

알림을 클릭하여 닫을 지 설정합니다.

5. autoClose

toast.alert('토스트 메시지', {
  autoClose: true/false
})

알림을 자동으로 닫히게 할 지 설정합니다.

6. autoCloseTime

toast.alert('토스트 메시지', {
  autoCloseTime: 5000
})

몇 ms 후 알림을 닫을 지 설정합니다.

7. progressBar

toast.alert('토스트 메시지', {
  progressBar: true/false
})

progressBar를 보여줄 지 설정합니다.

8. barColor

toast.alert('토스트 메시지', {
  barColor: "#000000"
})

progressBar의 색상을 설정합니다.

9. pauseOnHover

toast.alert('토스트 메시지', {
  pauseOnHover: true/false
})

알림에 마우스를 올렸을 때 알림의 시간을 일시정지 할 지 설정합니다.

10. customImage

toast.alert('토스트 메시지', {
  customImage: "img/url"
})

알림에 사용할 이미지를 설정합니다.

11. confirmBtn

toast.alert('토스트 메시지', {
  confirmBtn: "확인"
})

확인 버튼의 문구를 설정합니다.

12. cancleBtn

toast.alert('토스트 메시지', {
  cancleBtn: "취소"
})

취소 버튼의 문구를 설정합니다.

13. confirmBtnColor

toast.alert('토스트 메시지', {
  confirmBtnColor: "#0000ff"
})

확인 버튼의 색상을 설정합니다.

14. cancleBtnColor

toast.alert('토스트 메시지', {
  confirmBtnColor: "#ff0000"
})

취소 버튼의 색상을 설정합니다.

🍳 CONTRIBUTING

Garlic-Toast 라이브러리에 기여하고 싶다고 생각하셨다면 아래 문서를 참고해주세요.

CONTRIBUTING