[React] react-toasts 를 사용하여 toast popup 띄우기-떽떽대는 개발공부

 

 

사용법

먼저 react-toasts 모듈을 install 해준다.

npm install -s react-toasts

 

인스톨이 완료되면 아래와 같이 import 해준 후 코드를 작성한다.

import React, {Component} from 'react';

import {ToastsContainer, ToastsStore, ToastsContainerPosition} from 'react-toasts';

class Main extends Component {
    onClickToastPopup(){
        ToastsStore.success("This is ToastPopup");
    }

    render(){
        return(
            <div>
                <header>
                    <h2>Toast Popup</h2>
                </header>
                <div>
                    <button type="button"
                            id="popup"
                            onClick={this.onClickToastPopup}>
                        Toast
                    </button>
                    <ToastsContainer store={ToastsStore} 
                                     lightBackground/>
                </div>
            </div>
        );
    }

}

export default Main;

 

Toast 버튼을 클릭하면 onClickToastPopup 함수를 호출하여 ToastStore를 불러주게 되는데,나는 success 형식을 호출하였다. 형식에 따른 토스트 팝업의 색은 아래와 같다.

 

• success: 초록색
• info: 흰색
• warning: 노란색
• error: 붉은색

진한 색이 거슬린다면 lightBackground 를 사용하여 연하게 나타낼 수도 있다.

 

react-toasts 에서 팝업창을 띄울 위치도 지정할 수 있다. 위치를 지정하려면 import 문에 ToastsContainerPosition 함수를 추가하여 가져온다.

import React, {Component} from 'react';

import {ToastsContainer, ToastsStore, ToastsContainerPosition} from 'react-toasts';

class Main extends Component {

    onClickToastPopup(){
        ToastsStore.success("This is ToastPopup");
    }

    render(){
        return(
            <div>
                <header>
                    <h2>Toast Popup</h2>
                </header>
                <div>
                    <button type="button"
                            id="popup"
                            onClick={this.onClickToastPopup}>
                        Toast
                    </button>
                    <ToastsContainer position={ToastsContainerPosition.TOP_CENTER}
                    				 store={ToastsStore} 
                                     lightBackground/>
                </div>
            </div>
        );
    }

}

export default Main;

 

토스트 팝업을 띄울 수 있는 위치는 다음과 같다.

• TOP_RIGHT
• TOP_LEFT
• TOP_CENTER
• BOTTOM_RIGHT
• BOTTOM_LEFT
• BOTTOM_CENTER.

출력물