modalme

Modalme is React component for using custom modals

Usage no npm install needed!

<script type="module">
  import modalme from 'https://cdn.skypack.dev/modalme';
</script>

README

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