Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
material-paper
Advanced tools
React Component of paper material inspired by Google's Material Design.
Material-Paper is designed to be a malleable, versatile, and responsive component for any web application. It acts as a general container that provides responsive and material-like behavior.
Material-Paper is available as an npm package.
$ npm install --save material-paper
Material-Paper is simply a React component, so you should be fairly familiar with the React framework before using Material-Paper.
While most React components are comprised of an assortment of attributes used for configuration, this can easily make the code feel cluttered messy very quickly. In an attempt to avoid this issue, Material-Paper is configured with a single settings
attribute, which takes in a parameters of a basic JavaScript object that contains any configuration you choose.
Here is a simple example of Material-Paper using the settings
attribute to configure any settings:
const React = require('react');
const Paper = require('material-paper');
var paperSettings = {
background: '#fff',
style: {
margin : '0 auto',
display : 'block',
height : '150px',
width : '200px'
},
overlayColor : undefined,
burstSpeed : 2000,
burstColor : undefined,
clickable : true,
liftOnHover : false,
liftOnClick : true,
zDepth : 1
}
const MyAwesomeReactApp = React.createClass({
render: function(){
return(
<div>
<Paper settings={paperSettings}>
Hello World!
</Paper>
</div>
);
}
});
There are an array of possible settings that you can configure within the settings
attribute. Here is a list of what they are and what kinds of parameters they expect:
background - string - The background of the paper component; expects some color, image link, etc. If you're trying to set the background to an image, just using the format url('path/to/image.png')
.
style - object - Defines any custom styles to the paper component. The contents of this object is that of any other traditional style object.
overlayColor - string - An overlay color to the paper component. This is exactly what it sounds like; an optional overlay color to the current paper component background.
burstSpeed - number - The speed in which a burst element will perform its bursting animation (ms).
burstColor - string - Defines the color of the burst element. The burst element is a light, translucent gray.
clickable - boolean - Whether or not the paper component can be clicked, or has click related properties.
liftOnHover - boolean - Whether or not the paper component will change zDepth when it's hovered over.
liftOnClick - boolean - Whether or not the paper component will change zDepth when it's clicked.
zDepth - number - Defines the zDepth of the paper component. The zDepth is the distance the paper component is from the ground of the application.
zoom - boolean - Whether or not the paper component background will slightly zoom when it's hovered over.
noBoundaries - boolean - Whether or not a burst emitted from the paper component can leave the boundaries of the paper component itself and spread into its surroundings.
circular - boolean - Whether or not the paper component will be rounded or rectangular.
If you want to see Material-Paper in action, feel free to check out one of the examples in the /examples
directory. To get the example up and running, all you need to do is build the jsx
source files and then build/run the example application to test it out.
The following commands should do the trick:
$ git clone https://github.com/nickzuber/material-paper.git
$ cd material-paper
$ npm run serve
Copyright (c) 2016 Nick Zuber
FAQs
React Component of paper material inspired by Google's Material Design.
The npm package material-paper receives a total of 31 weekly downloads. As such, material-paper popularity was classified as not popular.
We found that material-paper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.