@jswork/react-dialog
v1.1.15
Published
A react dialog based on HTML dialog.
Downloads
327
Readme
react-dialog
A react dialog based on HTML dialog.
installation
npm install -S @jswork/react-dialog
usage
- import css
@import "~@jswork/react-dialog/dist/style.css";
// or use sass
@import "~@jswork/react-dialog/dist/style.scss";
// customize your styles:
$react-dialog-options: ()
- import js
import React from 'react';
import ReactDialog from '../../src/main';
import styled from 'styled-components';
import '@jswork/react-backdrop/dist/style.css';
const Container = styled.div`
width: 80%;
height: 80vh;
border: 1px solid #ccc;
position: relative;
margin: 30px auto 0;
nav {
position: fixed;
z-index: 100;
}
`;
export default () => {
const [visible, setVisible] = React.useState(true);
const handleOpen = () => {
setVisible(true);
};
const handleClose = () => {
setVisible(false);
};
return (
<Container>
<button onClick={handleOpen}>Open</button>
<ReactDialog visible={visible} withBackdrop keepMounted closeOnBackdropClick onClose={handleClose}>
<ul>
<li>道可道,非常道;名可名,非常名。</li>
<li>无名,天地之始,有名,万物之母。</li>
<li>故常无欲,以观其妙,常有欲,以观其徼。</li>
<li>此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。</li>
</ul>
<nav>
<button onClick={handleClose}>Close</button>
</nav>
</ReactDialog>
</Container>
);
};
preview
- https://afeiship.github.io/react-dialog/
license
Code released under the MIT license.