👻 나의 작고 귀여운 React Toast UI 👻

배포

Wanna Be !

• 띄워지는 애니메이션은 커스텀하게 변경할 수 있는가?
• 띄워지는 Toast UI를 커스텀하게 변경할 수 있는가?
• NPM 출시는 완료하였는가?
• Static Typing이 되어있는가?
• 사용하고 싶은가?

🥽 Preview

정상 동작

클릭하면 내려간다

빠른 동작

🔍 Usage

세 줄 요약

1. ToastProvider로 Toast UI를 보여줄 컴포넌트를 감싼다.
2. 감싼 컴포넌트에서 useToast를 호출해 Toast UI를 트리거할 함수를 받는다.
3. 함수를 호출하여 Toast UI를 렌더링한다.

1. ToastProvider로 Toast UI를 보여줄 컴포넌트를 감싼다.

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import TestContainer from "./@components/TestContainer";
import ToastProvider from "./@components/ToastProvider";

const root = ReactDOM.createRoot(document.getElementById("root"));

//TestContainer에서 Toast UI를 출력할 것이므로 ToastProvider 컴포넌트로 감싸준다.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ToastProvider>
      <TestContainer />
    </ToastProvider>
  </React.StrictMode>
);

2. 감싼 컴포넌트에서 useToast를 호출해 Toast UI를 트리거할 함수를 받는다.

// @components/TestContainer/index.jsx

const TestContainer = () => {
  // useToast 훅으로 부터 Toast UI를 트리거할 함수를 받아낸다.
  const { displayMessage } = useToast();

  // ...
  
  return (
    <Styled.Root>
      <Styled.Button onClick={onClickTestContainer}>클릭해보세요</Styled.Button>
    </Styled.Root>
  );
};

3. 함수를 호출하여 Toast UI를 렌더링한다.

// @components/TestContainer/index.jsx

const TestContainer = () => {
  const { displayMessage } = useToast();
  
  // 함수를 호출하여 `Toast UI`를 렌더링한다.
  const onClickTestContainer = () => {
    displayMessage("준찌입니다", false);
  };
  
  return (
    <Styled.Root>
      <Styled.Button onClick={onClickTestContainer}>클릭해보세요</Styled.Button>
    </Styled.Root>
  );
};