1

react-glass-surface

 1 year ago
source link: https://www.npmjs.com/package/react-glass-surface
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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)

Settings Window

Installation

  1. Using yarn

yarn add react-glass-surface

  1. 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 = {}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK