react-acrylic-ts

typescript version of react-acrylic by Damaera

Frost glass effect, Acrylic Material react component

Inspired by Fluent Design's Acrylic Material

Sample page

npm

Install

npm install --save react-acrylic-ts

Usage

import React, { Component } from 'react'

import MyComponent from 'react-acrylic-ts'
import 'react-acrylic-ts/dist/index.css'

class Example extends Component {
  render() {
    return(
      <Acrylic
      position = 'fixed'
      opacity = {0.5}
      top = '250px'
      left = '450px'
      width = '300px'
      height = '200px'
      borderRadius = '10px'
      boxShadow='10px 5px 5px blue'
      colorOverlay='#0000FF'>
      </Acrylic>
    )     
    
  }
}

Default Value

| Props | Default value | | --------------|---------------| | position | 'fixed', | left | 0, | top | 0, | width | 0, | height | 0, | colorOverlay | '#fff' | | opacity | 0.5 | | borderRadius | 0 | | boxShadow | null | | blur | 30 |

License

MIT © Yongjun042