0.1.1 • Published 6 years ago
react-acrylic v0.1.1
React Acrylic
Frost glass effect, Acrylic Material react component
Inspired by Fluent Design's Acrylic Material
This one uses html2canvas
, which takes dynamic ‘screenshots’ of the content to blur.
Live Demo
https://6xp9vyjj23.codesandbox.io/
Usage
import React, { Component } from 'react'
Import Acrylic from 'react-acrylic'
class YourComponent extends Component {
render() {
<Acrylic
colorOverlay='#eee'
opacity='0.4'
position='fixed'
top='100px'
left='100px'
width='300px'
height='200px'
blur={40}
borderRadius='2px'
borderRadius='2px'
>
<span>Hello Acrylic</span>
</Acrylic>
}
}
Props
Props | Default value |
---|---|
position | 'fixed' , |
left | 0 , |
top | 0 , |
width | 0 , |
height | 0 , |
colorOverlay | '#fff' |
opacity | 0.5 |
borderRadius | 0 |
boxShadow | null |
blur | 30 |