@denkschuldt/react-dialog v1.0.4

@denkschuldt/react-dialog

A simple to use and customizable react dialog implementation.

Installation

# NPM
$ npm install --save @denkschuldt/react-dialog

Basic usage

import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import Dialog from '@denkschuldt/react-dialog';

const App = () => {
  const [ isVisible, setIsVisible ] = useState(false);
  return (
    <div>
      <button
        type='button'
        onClick={() => setIsVisible(true)}>
        Show dialog
      </button>
      {
        isVisible &&
        <Dialog
          title='Dialog'
          onCancelClick={() => {}}
          onConfirmClick={() => {}}
          onCloseClick={() => setIsVisible(false)}>
          <span>
            This is the body
          </span>
        </Dialog>
      }
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

See more examples at @DenkSchuldt/react-dialog

Props

Styling

Use the className prop to override dialogs classes:

.your-css-class {
  .dnk-dialog-content {
    /* The dialog card */
    .dnk-dialog-close {
      /* The close button */
    }
    .dnk-dialog-body {
      .dnk-dialog-body-buttons {
        /* The buttons div container */
        button {
          /* cancel button */
          &.dnk-btn-primary {
            /* confirm button */
          }
        }
      }
    }
  }
}

Contributing

• Fork the project
• Make changes and include tests
• Update README, CHANGELOG with detailed info
• Send me a PR :bowtie:

License

MIT