react-popup-ts
v1.1.0
Published
Made with create-react-library
Downloads
4
Readme
react-popup-ts
Made with create-react-library
Install
npm install --save react-popup-ts
Usage
import React, { useState } from 'react';
import { Popup, PopupMulti, usePopupMulti } from 'react-popup-ts';
import 'react-popup-ts/dist/index.css';
//
const App = () => {
//
const [is_show, setIsShow] = useState(false);
//
const { popup_arr, addPopup, removePopup } = usePopupMulti({});
// -----
//
function toggleShow() {
setIsShow((is_show) => !is_show);
}
//
function onAddPopup() {
addPopup({
is_show: true,
children: (
<div
style={{
width: 'fit-content',
padding: '6px 12px',
borderRadius: '10px',
backgroundColor: 'rgba(0,0,0,0.8)',
color: 'white'
}}
>
This is Popup {Math.floor(Math.random() * 1000)}
</div>
)
});
}
//
return (
<div>
<div onClick={toggleShow}>Toggle</div>
<div onClick={onAddPopup}>Add Popup</div>
<div style={{ position: 'fixed', left: 0, top: 100 }}>
<Popup
is_show={is_show}
handleAfterEndTimeExist={toggleShow}
time_exist={0}
>
<div
style={{
width: 'fit-content',
padding: '6px 12px',
borderRadius: '10px',
backgroundColor: 'rgba(0,0,0,0.8)',
color: 'white'
}}
>
This is Popup
</div>
</Popup>
</div>
<div style={{ position: 'fixed', left: 0, top: 200 }}>
<PopupMulti
popup_arr={popup_arr.current}
removePopup={removePopup}
/>
</div>
</div>
);
};
export default App;
License
MIT © vandat9xhn