tnw-modal-library v1.1.0

tnw-modal-library

Made with create-react-library

Install

npm install --save tnw-modal-library --force

Usage

import React from 'react';
import { Modal, useModal } from 'tnw-modal-library';
import 'tnw-modal-library/dist/index.css';

const containerStyle = {
  height: '50vh',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center'
};

const toggleButtonStyle = {
  backgroundColor: 'turquoise',
  cursor: 'pointer',
  padding: '1rem 2rem',
  textTransform: 'uppercase',
  border: 'none'
};

const App = () => {
  const { isShowing, toggle } = useModal();
  const title = 'Title';
  const message = 'Show modal!';
  return (
    <div style={containerStyle}>
      <h1>My own React Modal</h1>
      <button style={toggleButtonStyle} onClick={toggle}>
        Toggle Modal
      </button>
      <Modal
        isShowing={isShowing}
        close={toggle}
        title={title}
        message={message}
      />
    </div>
  );
};

export default App;

License

© thucnhi-wiedenhofer