npm.io
0.0.22 • Published 5 years ago

react-smooth-modal

Licence
MIT
Version
0.0.22
Deps
0
Size
142 kB
Vulns
0
Weekly
0

React Smooth Modal

A Smooth Modal which can be fullscreen and draggable dialog for React.JS.

gzip size

Installation

 # If you use npm:
 npm install react-smooth-modal

 # Or if you use Yarn:
 yarn add react-smooth-modal

Usage

Here is a example of react-smooth-modal being used in React with hooks:

 import React, { useState } from 'react';
 import Modal from 'react-smooth-modal';

 const App = () => {
    const [visible, setVisible] = useState(false);
    return (
        <div>
            <Modal
                title="Test Title"
                visible={visible}
                onCancel={() => setVisible(false)}
            >
                Hello World!
            </Modal>
        </div> 
    )
 }

Documentation

Coming soon!

API

Name Type Default Description
afterClose function() - Callback when the modal close
bodyStyle CSSProperties - The modal body style
borderRadius number / string 5px BorderRadius of modal container
cancelText string 取消 The cancel button text
canFullscreen boolean false Whether the modal can fullscreen
centerd boolean false Centered Modal
className string - The modal container className
closable boolean true Whether a close (x) button is visible or not
draggable boolean false Can be draggable
escClosable boolean true Whether support press esc to close
footer ReactNode - The modal's footer
maskClosable boolean true Whether to close the modal when the mask is clicked
onCancel function() -
onSure function() -
sureText string 确定 The sure button text
title ReactNode / string - The modal's title
visible boolean false Whether the modal is visible or not
width number / string 500px The modal's width
zIndex number 1001 The z-index of the Modal

Keywords