Code Monkey home page Code Monkey logo

react-message's Introduction

react-message

npm npm Build Status npm version

a message notice ui component for react

Installation

using npm

npm install rc-message --save

using yarn

yarn add rc-message

Screenshots

success confirm prompt dark

Example

https://lijinke666.github.io/react-message/

Development

git clone https://github.com/lijinke666/react-message
npm install | yarn
npm start
open `http://localhost:3000/`

Usage

import Message from "rc-message"
import "rc-message/assets/index.css"
Message.success({
    content:"hello world"
})

API

  • Message.success(options)
  • Message.error(options)
  • Message.info(options)
  • Message.warning(options)
  • Message.loading(options)
  • Message.confirm(options)
  • Message.prompt(options)

Options

  • options.content

    • Desc : content of the message
    • Type : string | ReactNode
    • Default : -
  • options.duration

    • Desc : time before auto-dismiss,in seconds
    • Type : number
    • Default : 2
  • options.theme

    • Desc : theme of the message
    • Type : string
    • Default : light
  • options.onClose

    • Desc : Specify a function that will be called after the message closed
    • Type : Function
    • Default : -

Special options

Base Options of the confirm() and prompt()

  • options.content

    • Desc : content of the message
    • Type : string | ReactNode
    • Default : -
  • options.okText

    • Desc : Text of the OK button
    • Type : string
    • Default : Ok
  • options.cancelText

    • Desc : Text of the Cancel button
    • Type : string
    • Default : Cancel
  • options.onOk

    • Desc : Specify a function that will be called when a user clicked OK buttond
    • Type : Function
    • Default : -
  • options.onCancel

    • Desc : Specify a function that will be called when a user clicked mask, close button on top right or cancel button
    • Type : Function
    • Default : -
  • Message.prompt(options)

    • options.inputType
      • Desc : input html type of the message
      • Type : string
      • Default : text
    • options.placeholder
      • Desc : input placeholder of the message
      • Type : string
      • Default : -

react-message's People

Contributors

lijinke666 avatar

Stargazers

 avatar  avatar

Forkers

andreyohiienko

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.