react-glass-surface v1.0.2

react-glass-surface

Introduction

react-glass-surface is:

1. ✨ A container styled like a glass pane (see: glassmorphism)
2. 💞 Behaves exactly like a div and doesn't add another layer
3. 🖌 Fully-Customizable and easy-to-use
4. 🅾 Coming with zero dependencies
5. 🖼 You can pass style and className to apply your own styles
6. ♻ All props are passed to the container (e.g. onClick)

Installation

1. Using yarn

yarn add react-glass-surface

2. Using npm

npm install react-glass-surface

Make sure that your React version is > 16.8!

Basic Usage

import Glass from 'react-glass-surface'

const YourComponent = () => {
  return (
    <Glass>
      <p>Content</p>
    </Glass>
  )
}

PROPS

There are different props available to customize the container. None of these are needed. Keep in mind that the css property backdrop-filter can only be styled via className. The default values for these props are actually styled via className.

background: ?string = 'rgba(255, 255, 255, 0.2)'

border: ?string = 'none'

borderRadius: ?string = '0px'

boxShadow: ?string = 'none'

className: ?string = ''

style: ?Object = {}