modalme

    3.0.0 • Public • Published

    Modalme

    Live Demo

    modalme.com

    Modalme-readme

    Modalme is React component for using custom modals

    Getting started

    npm-package (2 5 0)

    npm install modalme
    

    Style import (with webpack)

    # CSS
    import 'modalme/dist/index.css';
    

    Example

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import Modalme from 'modalme';
    
    class App extends Component {
      customButton = openModal => (
        <button type='button' className='_1I0MO' onClick={openModal}>
          Click me!
        </button>
      );
      customContent = closeModal => {
        return (
          <div className='_3BV9V'>
            <h2>Hello, Welcom to modalme</h2>
            <button type='button' className='_330Pu'
            onClick={closeModal}>
              X
            </button>
          </div>
        );
      };
      render() {
        return (
          <Modalme customButton={this.customButton}
            customContent={this.customContent}
            modalName='Bottom'
            ReactDOM={ReactDOM}
            modalContainer='modal'
          />
        );
      };
    };
    
    export default App;

    Props

    • modalContainer: String, (required)
      • Make sure to bind modal to your appElement
        <!-- make sure to add add this line of code in your public folder -->
        <div id="modal"></div>
    • modalName: String, default Bottom

      • available string props: Top, Right, Bottom, Left, Unfolding, Revealing, Uncovering, BlowUp, Sketch, Bond
    • renderCustomButton: Function, custom button component (required)

      • Use this to render a custom button
      • Passes openModal callback function to open modal
        customButton = openModal => (
          <button type='button' className='_1I0MO' onClick={openModal}>
            Click me!
          </button>
        );
    • renderCustomContent: Function, custom modal content component (required)

      • Use this to render a custom modal content
      • Passes closeModal callback function to close modal
        customContent = closeModal => {
          return (
            <div className='_3BV9V'>
              <h2>Hello, Welcom to modalme</h2>
              <button type='button' className='_330Pu'
              onClick={closeModal}>
                X
              </button>
            </div>
          );
        };

    Support

    Please open an issue.

    Author

    erinyes 2020, erinyes.com

    Donation

    If this project help you reduce time to develop, you can give me a cup of coffee :)

    paypal

    Contributing

    Each PR should be specific and isolated to the issue you're trying to fix. Please do not stack features/chores/refactors/enhancements in one PR. Describe your feature/implementation in the PR. If you're unsure its useful or if it is a major change, please open an issue first and get feedback.

    • Follow eslint provided
    • Comment your code
    • Write clean code

    Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

    License

    MIT

    Install

    npm i modalme

    DownloadsWeekly Downloads

    29

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    355 kB

    Total Files

    8

    Last publish

    Collaborators

    • erinyesinfo