본문으로 건너뛰기

Toast

원하는 위치에 팝업을 띄울 수 있는 컴포넌트입니다. 팝업은 일정시간 이후에 사라집니다.

ForwardRef 컴포넌트로, 팝업의 컨트롤을 ref 를 통해 얻을 수 있습니다.

export function ToastBasic(){
  const control = useRef<ToastControl|null>(null);
  const divRef = useRef<HTMLDivElement|null>(null);
  return <Frame>
    <Flex>
      <Button onClick={() => {
        divRef.current && control.current?.showMessage('메시지다!!!', divRef.current, 0, 30);
      }}
      >열기
      </Button>
    </Flex>
    <Flex>
      <div ref={divRef}>여기에 토스트가 뜹니다.</div>
    </Flex>
    <Toast ref={control} 
    timeToShow={2000}
    />
  </Frame>
}
여기에 토스트가 뜹니다.

속성 설명​

(optional) timeToShow​

timeToShow = number

팝업을 보여주는 시간입니다. 헤당 시간 이후에 팝업은 사라집니다. ms 단위로 지정합니다.

만약 이 값을 0으로 주면 자동으로 사라지지 않습니다.

(optional) toastBody​

toastBody = JSX.Element

toastBody 을 사용하면 팝업 전체를 커스터마이징 할 수 있습니다. 기본 특성은 그대로 유지됩니다.

export function ToastCustom(){
  const control = useRef<ToastControl|null>(null);
  const divRef = useRef<HTMLDivElement|null>(null);

  const [msg, setMsg] = useState('');
  const showCustomMessage = (msg:string) => {
    setMsg(msg);
    divRef.current && control.current?.showMessage(msg, divRef.current, 0, 30);
  }

  return <Frame>
    <Flex>
      <Button onClick={() => {
        showCustomMessage('커스텀메시지다!!!');
      }}
      >열기
      </Button>
    </Flex>
    <Flex>
      <div ref={divRef}>여기에 toastBody 가 뜹니다.</div>
    </Flex>
    <Toast ref={control}
    toastBody={<div style={{border:'1px solid red', borderRadius: '10px', padding:'5px 10px', background: 'orange'}}>{msg}</div>}
    timeToShow={2000}
    />
  </Frame>
}
여기에 toastBody 가 뜹니다.

(optional) toastIcon​

toastIcon = JSX.Element

팝업 왼쪽에 뜨는 아이콘을 지정할 수 있습니다.

export function ToastIcon(){
  const control = useRef<ToastControl|null>(null);
  const divRef = useRef<HTMLDivElement|null>(null);
  return <Frame>
    <Flex>
      <Button onClick={() => {
        divRef.current && control.current?.showMessage('아이콘이 있는 메시지입니다.', divRef.current, 0, 30);
      }}
      >열기
      </Button>
    </Flex>
    <Flex>
      <div ref={divRef}>여기에 토스트가 뜹니다.</div>
    </Flex>
    <Toast ref={control} 
    timeToShow={2000}
    toastIcon={<div style={{width:'15px', height:'15px', borderRadius:'100%', background:'red'}}></div>}
    />
  </Frame>
}
여기에 토스트가 뜹니다.

(optional) showAnimation​

showAnimation = string

팝업이 보여질때 사용되는 애니메이션을 지정합니다. 이때 keyframes 정의는 따로 있어야 합니다.

const StyledAnimation = styled.div`
  @keyframes slidein {
    from {
      transform: translateX(50%);
      opacity: 0;
    }

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  @keyframes slideout {
    from {
      transform: translateX(0%);
      opacity: 1;
    }

    to {
      transform: translateX(50%);
      opacity: 0;
    }
  }
`;
export function ToastAnimation(){
  const control = useRef<ToastControl|null>(null);
  const divRef = useRef<HTMLDivElement|null>(null);
  return <Frame>
    <Flex>
      <Button onClick={() => {
        divRef.current && control.current?.showMessage('메시지다!!!', divRef.current, 0, 30);
      }}
      >열기
      </Button>
    </Flex>
    <Flex>
      <div ref={divRef}>여기에 토스트가 뜹니다.</div>
    </Flex>
    <StyledAnimation>
      <Toast ref={control} 
      timeToShow={2000}
      showAnimation='slidein 1s' hideAnimation='slideout 0.7s'
      />
    </StyledAnimation>
  </Frame>
}
여기에 토스트가 뜹니다.

(optional) hideAnimation​

hideAnimation = string

팝업이 사라질때 사용되는 애니메이션을 지정합니다. showAnimation 과 사용법은 같습니다.

컨트롤 설명​

showMessage​

showMessage = ToastMessageShow = (message?: string, elem?: HTMLElement, offsetLeft?:number, offsetTop?:number) => void

메시지를 보여줄때 호출할 수 있습니다. 다음은 파라미터 설명입니다.

파라미터타입설명
messagestring팝업에 보여줄 메시지를 지정합니다.
elemHTMLElement팝업의 위치를 보여줄 기본 Element 를 지정합니다. 이 Element 의 위치(left-top)를 기준으로 팝업이 보여집니다.
offsetLeftnumber기본 팝업의 위치에서 left 방향 보정값을 설정합니다. 만약 50을 넣으면 기본위치에서 x축으로 + 50px 위치에 팝업이 보여집니다.
offsetTopnumber기본 팝업의 위치에서 top 방향 보정값을 설정합니다. 만약 50을 넣으면 기본위치에서 y축으로 + 50px 위치에 팝업이 보여집니다.