antd-prompt
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

    antd-prompt

    An ant.design helper that auto create a Modal with an optional message prompting the user to input some text.

    Support antd v4.

    Installation

    npm i antd-prompt

    Usage

    Edit antd-prompt

    import React, { component } from 'react';
    import ReactDOM from 'react-dom';
    import prompt from 'antd-prompt';
    import { Button, message } from 'antd';
    
    class App extends Component {
        handler = async () => {
            try {
                const name = await prompt({
                    title: "Please enter name",
                    placeholder: "Your name",
                    rules: [
                        // check this link for more help: https://ant.design/components/form/#Validation-Rules
                        {
                            required: true,
                            message: "You must enter name"
                        }
                    ],
                    modalProps: {
                        width: '80%'
                    }
                });
            } catch (e) {
                message.error('Please enter name');
            }
        }
        render() {
            return <div>
                <Button onClick={this.handler}>Set Name</Button>
            </div>
        }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));

    Keep modal open after submit

    import React, { component } from 'react';
    import ReactDOM from 'react-dom';
    import prompt from 'antd-prompt';
    import { Button, message } from 'antd';
    
    class App extends Component {
        handler = async () => {
            await prompt({
                title: "Please enter name",
                value: 'Initial Value',
                modalProps: {
                    width: '80%'
                },
                onOk: name => {
                    // do something with name
                    return false;
                    // or return Promise.resolve(false);
                }
            });
        }
        render() {
            return <div>
                <Button onClick={this.handler}>Set Name</Button>
            </div>
        }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));

    Install

    npm i antd-prompt

    DownloadsWeekly Downloads

    384

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    9.38 MB

    Total Files

    10

    Last publish

    Collaborators

    • wangsijie