this is a smart popup created by react and typeScrypt
The package can be installed via npm:
npm install react-smart-popup --save
Or via yarn:
yarn add react-smart-popup
import React, { useState, useCallback } from 'react';
import { popup } from 'react-smart-popup';
const App = () => {
const [isOpenDialog, setIsOpenDialog] = useState < boolean > false;
const openPopupFunc = useCallback(() => {
setIsOpenDialog(true);
}, [setIsOpenDialog]);
const handleSubmitFunc = useCallback(() => {
console.log('submit');
}, []);
const handleCloseFunc = useCallback(() => {
console.log('close');
}, []);
return (
<div>
<button onClick={openPopupFunc}>Open popup </button>
<Popup
isOpen={isOpenDialog}
setIsOpen={setIsOpenDialog}
handleSubmit={handleSubmitFunc}
handleClose={handleCloseFunc}
>
hello world
</Popup>
</div>
);
};
Property | type | Default Value | Description |
---|---|---|---|
isOpen | Boolean | false | state of popup |
setIsOpen | Func | change state of popup | |
children | ReactNode | some children to show in popup body | |
handleSubmit | Func | on press submit button handler | |
handleClose | Func | on press close button handler | |
closeOnPressEscape | Boolean | true | close active popup when press esc key |
closeOnClickAway | Boolean | true | close popup when click outside |
width | String | '50%' | popup width |
height | String | '50%' | popup height |
header | String | popup header |