npm i reactstrap -s
https://reactstrap.github.io/components/alerts/
reactstrap - Alerts
Alerts This is a primary alert — check it out! This is a secondary alert — check it out! This is a success alert — check it out! This is a danger alert — check it out! This is a warning alert — check it out! This is a info alert — check it out!
reactstrap.github.io
npm i bootstrap i -s
https://getbootstrap.com/docs/4.6/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
npm i sweetalert2 -s //알림창 컨펌창 예쁨 ㅇㅇ
https://sweetalert2.github.io/
SweetAlert2
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
sweetalert2.github.io
npm i reactstrap이다 react-strap이 아니라
부트스트랩 사용시
import 'bootstrap/dist/css/bootstrap.css' => app.js
component에 import
import swal from 'sweetalert2'
import {Alert, UncontrolledAlert} from 'reactstrap'
Button / Button DropDown (=SlideDown) / Button Group
Breadcrumbs (=Navigation)
Carousel (=Slider)
Collapse (=더보기 Slide Toggle)
Fade (=Fade Toggle)
Input Group (=Input Form)
Jumbotron (=메인 배너)
Layout (=row & col)
Navbar (=Navigation Bar)
Popover (=클릭하면 나오는 추가설명 같은것)
Progress (=로딩 진행율 바)
Spinner (=로딩중일때 돌아가는 원)
Toasts (=메시지 알림같이 생긴넘)
Tooltips (=hover하면 나오는 팁)
'basic > React.js' 카테고리의 다른 글
| [React.js] react-icons (0) | 2021.02.14 |
|---|---|
| [React.js] Ref (0) | 2021.02.09 |
| [React.js] 리액트에서 jquery (0) | 2021.02.07 |
| [React.js] Life Cycle 생명주기 함수 ② (0) | 2021.02.07 |
| [React.js] Life Cycle 생명주기 함수 ① (0) | 2021.02.04 |
