in

React dialog box library – DEV Community


simple react.js modal box

JavaScript Style Guide



Intro



Install

npm install --save react-js-dialog-box
Enter fullscreen mode

Exit fullscreen mode



Usage

import React from 'react'
import { ReactDialogBox } from 'react-js-dialog-box'
import 'react-js-dialog-box/dist/index.css'

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isOpen: false
    }
  }

  openBox = () => {
    this.setState({
      isOpen: true
    })
  }

  closeBox = () => {
    this.setState({
      isOpen: false
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.openBox}>Open ReactDialogBox </button>

        {this.state.isOpen && (
          <>
            <ReactDialogBox
              closeBox={this.closeBox}
              modalWidth='60%'
              headerBackgroundColor='red'
              headerTextColor='white'
              headerHeight='65'
              closeButtonColor='white'
              bodyBackgroundColor='white'
              bodyTextColor='black'
              bodyHeight='200px'
              headerText='Hearder '
            >
              <div>
                <h1>Dialog Content</h1>
              </div>
            </ReactDialogBox>
          </>
        )}
      </div>
    )
  }
}

export default App
Enter fullscreen mode

Exit fullscreen mode



License

MIT © abodmicheal



Source: https://dev.to/abodmicheal/react-dialog-box-library-b1b

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

A Curated list of SQL to help you find useful script easily with vue and WindiCSS

React component to create graphic user interface with draggable nodes