sweetalert 라이브러리를 사용해서 알림창 나타내기

결과

내용

• sweetalert 라이브러리를 사용해서 alert창 나타내기
• Add service 클릭시 알림창을 나타냄
• Service name 에 소문자, 숫자 값으로 값 입력 가능
• 통과하지 못 하면 "only lowercase letters and numbers allowed." 문구 표시

코드

//최상위 컴포넌트
import swal from 'sweetalert';

//import button 누르면 실행되는 함수, alert 라이브러리 사용
  const handleAlert = () => {
    swal({
      title: 'Service name',
      content: 'input',
      buttons: ['Cancel', 'Add'],
    }).then(result => {
      const lower = result.toLowerCase();
      const num = result >= 0;

      //값이 소문자이거나 숫자이면 값을 추가함
      if (result === lower || num) {
        //inputs에 입력된 값으로 갱신해주고
        //check를 true로 반환
        setInputs({
          service_name: result,
        });
        setCheck(!check);
        setCheck(true);
      } else {
        swal({
          title: 'Service name',
          content: 'input',
          buttons: ['Cancel', 'Add'],
          text: 'only lowercase letters and numbers allowed.',
        });
      }
    });
  };

return(
 		<Import      
          data={data}
          handleAlert={handleAlert}
          inputData={inputData}
        />
       )

//하위 컴포넌트
<ButtonFrame
      onClick={handleAlert}
      style={{
        marginRight: '141px',
      }}
    >

기타

공식문서를 보면서 잘 따라했지만,
처음 써보는 라이브러리라 시간이 좀 걸렸다
스타일도 styled-component로는 방법이 없는것 같아서 css로 진행했다
조건에 만족하지 못했을때(else문) input박스 밑에다 빨간글씨로 에러메세지를 나타내고 싶었는데
라이브러리 특성상 위치 이동이 안됐다. 아니면 내가 못했을 수도
예제도 많이 찾아봤지만 해당 내용이 없었다
input 값을 내가 원하는대로 작업하기도 꽤 복잡했다
다음에는 다른 라이브러리를 사용해야겠다