Have ideas to improve npm?Join in the discussion! »

    This package has been deprecated

    Author message:

    This package has been deprecated. Please find this package under its new name @cloudflare/component-modal.

    cf-component-modal

    8.0.0 • Public • Published

    cf-component-modal

    Cloudflare Modal Component

    Installation

    Installation with yarn is recommended

     
    $ yarn add cf-component-modal
     

    Usage

    import React from 'react';
    import {
      Modal,
      ModalHeader,
      ModalTitle,
      ModalClose,
      ModalBody,
      ModalFooter,
      ModalActions,
      ModalInfo
    } from 'cf-component-modal';
    import { Button } from 'cf-component-button';
    import { Box } from 'cf-component-box';
     
    class ModalComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isModalOpen: false,
          width: null,
          showInfo: false
        };
        this.handleRequestOpen = this.handleRequestOpen.bind(this);
        this.handleRequestClose = this.handleRequestClose.bind(this);
      }
     
      handleRequestOpen() {
        this.setState({ isModalOpen: true });
      }
     
      handleRequestClose() {
        this.setState({ isModalOpen: false });
      }
     
      handleWidthToggle() {
        this.setState(oldState => ({
          width: oldState.width === 'wide' ? null : 'wide'
        }));
      }
     
      handleInfoToggle() {
        this.setState(() => ({
          showInfo: !this.state.showInfo
        }));
      }
     
      render() {
        return (
          <div>
            <Button type="default" onClick={this.handleRequestOpen}>
              Open Modal
            </Button>
            <Modal
              isOpen={this.state.isModalOpen}
              onRequestClose={this.handleRequestClose}
              width={this.state.width}
            >
              <ModalHeader>
                <ModalTitle>Hello from Modal</ModalTitle>
                <ModalClose onClick={this.handleRequestClose} />
              </ModalHeader>
              {this.state.showInfo && (
                <ModalInfo>This is some modal Info</ModalInfo>
              )}
              <ModalBody>
                <p>Look at this awesome modal!</p>
              </ModalBody>
              <ModalFooter>
                <ModalActions>
                  <Box marginRight="10px" display="inline-block">
                    <Button
                      type="default"
                      onClick={this.handleWidthToggle.bind(this)}
                    >
                      Toggle width
                    </Button>
                  </Box>
                  <Box marginRight="10px" display="inline-block">
                    <Button
                      type="default"
                      onClick={this.handleInfoToggle.bind(this)}
                    >
                      Toggle info
                    </Button>
                  </Box>
                  <Button
                    type="default"
                    onClick={this.handleRequestClose.bind(this)}
                  >
                    Close Modal
                  </Button>
                </ModalActions>
              </ModalFooter>
            </Modal>
          </div>
        );
      }
    }
     
    export default ModalComponent;
     

    Keywords

    none

    Install

    npm i cf-component-modal

    DownloadsWeekly Downloads

    0

    Version

    8.0.0

    License

    BSD-3-Clause

    Unpacked Size

    42.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar