useToast만들기

맨날 남이 만들어준거 쓰다가 그냥 만들어보았다

디자인은 대충했다 ㅎ

빨간토스트가 nagative, 파란토스트가 positive이다.

빨강토스트는 1초후, 파랑토스트는 3초후 사라지게 하였다.

---

코드

// App.tsx
import useToast from "./hooks/useToast";

function App() {
  const { showToast } = useToast();

  return (
    <div className="App">
      <button onClick={() => showToast(false, "bye", 1000)}>토스트 빨강</button>
      <button onClick={() => showToast(true, "hi", 3000)}>토스트 파랑</button>
      <hr />
...
    </div>
  );
}

export default App;

 

type, string(내용), time(몇초후 사라질지)를 매개변수로 받는 showToast 함수를 리턴한다.

/// useToast.tsx
import { render } from "@testing-library/react";

import Toast from "../components/Toast";

function useToast() {
  return {
    showToast: (type: boolean, string: string, time: number) => {
      render(<Toast type={type} string={string} time={time} />);
    },
  };
}

export default useToast;

 

Toast.tsx는 useEffect안의 setTimeout에 의해 {time}시간 후 꺼지도록 하였다.

/// Toast.tsx
import { useEffect, useState } from "react";
import styled from "styled-components";

function Toast({
  type,
  string,
  time = 2000,
}: {
  type: boolean;
  string: string;
  time: number;
}) {
  const [on, setOn] = useState(true);
  useEffect(() => {
    const timeOut = setTimeout(() => setOn(false), time);
    return () => clearTimeout(timeOut);
  }, []);
  if (on) return <Wrapper type={type}>{string}</Wrapper>;
  else return null;
}

export default Toast;

const Wrapper = styled.div<{ type: boolean }>`
  background: ${({ type }) => (type ? "blue" : "red")};
  width: 400px;
  height: 100px;
  padding: 30px;
`;