React-native-swal npm 배포

React 의 sweet alert 같은 형태의 modal을 만들어 라이브러리화 했습니다!

엄청 간단한 라이브러리지만 Typescript도 공부할 겸 가장 간단한 모양으로 짜서 배포해 보았습니다. 앞으로도 계속 필요한 프롭스 추가시킬 예정이니 예쁘게봐주세요 ~.~

https://www.npmjs.com/package/react-native-swal

Document

• Installation
• How to use
• Properties

Installation

npm i react-native-swal

How to use

react-native-swal을 import 하세요.

import Swal from 'react-native-swal';

아래 코드를 추가하고 원하는 Props를 사용하세요!

return (
     <Swal
        swal={swal}
        setSwal={setSwal}
        text={text}
        backgroundcolor="#225"
        color="white"
        positionFromBottom={80}
        fontsize={16}
        touchOutSideClose={true}
        duration={3000}
        textStyle={{fontFamily: 'NotoSans'}}
        button={true}
        buttonText={'hello'}
        btnFunction={() => setMode(!mod)}
        btnStyle={{color: 'red'}}
        popup={false}
      />
);

Properties

아래는 react-native-swal의 properties입니다.

Prop	required	Type	Description
swal	O	boolean	swal의 state값 모달상태값
setSwal	O	(open: boolean) => void	swal의 setState함수
text	O	string	원하는 swal 텍스트를 넣으세요
backgroundcolor	X	string	swal의 배경색 (기본값 : "black")
color	X	string	swal 글자색 (기본값 : "white")
positionFromBottom	X	number	swal의 바닥으로 부터의 높이를 설정 (기본값 : 80)
fontsize	X	number	swal 글자 사이즈 (기본값 : 16)
touchOutSideClose	X	boolean	swal 바깥 부분 클릭시 swal이 닫힙니다 (기본값 : false)
popup	X	boolean	swal 이 duration이후 사라지게 하거나 사라지지 않게 할 수 있습니다.(기본값 : true)
duration	X	number	swal 이 몇 초 후 사라지게 할지 설정하세요. (기본값 : 2000(2s)(popup Prop has to be true))
textStyle	X	{}	modal 의 textStyle을 설정하세요 -> 메인 텍스트
button	X	boolean	해당 prop을 true 로 설정 할 시 추가적인 버튼이 생성되며 해당 버튼을 사용해서 원하는 퍼포먼스를 낼 수 있습니다.
buttonText	X	string	버튼의 문구를 설정하세요(button Prop 이 true일 때만 사용)
btnStyle	X	{}	버튼의 textStyle을 설정하세요. 밑줄은 기본값으로 변경되지 않습니다. (button Prop 이 true일 때만 사용)
btnFunction	X	() => void	버튼을 클릭했을 때 사용되는 함수를 설정하세요.(button Prop 이 true일 때만 사용)