react-acrylic-ts
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

react-acrylic-ts

typescript version of react-acrylic by Damaera

NPM JavaScript Style Guide

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-acrylic-ts

Weekly Downloads

3

Version

1.1.0

License

MIT

Unpacked Size

150 kB

Total Files

12

Last publish

Collaborators

  • yongjun042