Morphing Circle Modal Component For React

Description:

A highly customizable modal component with a circle animation for React.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-circle-modal

# NPM
$ npm i react-circle-modal –save

import React from ‘react’
import ReactCircleModal from ‘react-circle-modal’

2. Basic usage.

<ReactCircleModal
  backgroundColor="#97349a"
  toogleComponent={onClick => (
    <button onClick={onClick}>
      Click here to open modal
    </button>
  )}
  offsetX={0}
  offsetY={0}
>
  {(onClick) => (
    <div style={{ backgroundColor: '#fff', padding: '1em' }}>
      <p>
        Content inside of modal
      </p>
      <button onClick={onClick}>
        Click here to close modal
      </button>
    </div>
  )}
</ReactCircleModal>

Preview: