![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
reactjs-coverflow
Advanced tools
Readme
Click bellow to try it on codesandbox!
(Inspired from https://github.com/andyyou/react-coverflow)
React Coverflow is a React component for building cover flow style carousel in a convenient way.
Features of reactjs-coverflow
Install reactjs-coverflow
using npm.
$ npm install reactjs-coverflow
The required stylesheet using css-module
and include in package(js file), so
you don't need include other stylesheet.
Exemple :
var React = require('react');
var Coverflow = require('reactjs-coverflow');
module.exports = React.createClass({
render: function() {
return (
<div>
<form>
<Coverflow ref="coverflow"
style={{width: "100vw", height:"500px"}}
margin={(this.state && this.state.margin + "px") || undefined}
startPosition={4}
enableScroll={true}
rotate={30}
translateX={200}
animationSpeed={0.8}>
<div style={{width: '150px', height: '150px', backgroundColor: 'pink'}} />
<div style={{width: '150px', height: '150px', backgroundColor: 'yellow'}} />
<div style={{width: '150px', height: '150px', backgroundColor: 'green'}} />
<div style={{width: '150px', height: '150px', backgroundColor: 'orange'}} />
<div style={{width: '150px', height: '150px', backgroundColor: 'blue'}} />
<div style={{width: '150px', height: '150px', backgroundColor: 'purple'}} />
<div style={{width: '100px', height: '150px', backgroundColor: '#000000'}} />
<div style={{width: '200px', height: '150px', backgroundColor: 'pink'}} />
</Coverflow>
<input type="text" name="margin" onChange={this.handleMarginChange} />
<button onClick={this.prev} type="button">Prev</button>
<button onClick={this.next} type="button">Next</button>
<button onClick={this.getPosition} type="button">GetPosition</button>
<button onClick={this.goAt} type="button">Go At 5</button>
</form>
</div>
);
},
handleMarginChange: function(e) {
e.preventDefault();
this.setState({margin: parseFloat(e.currentTarget.value)});
},
prev: function(e) {
e.preventDefault();
this.refs.coverflow.previous();
},
next: function(e) {
e.preventDefault();
this.refs.coverflow.next();
},
getPosition: function(e) {
e.preventDefault();
console.log(this.refs.coverflow.getPosition());
},
goAt: function(num, e) {
e.preventDefault();
this.refs.coverflow.goAt(4);
}
});
You can get some function of your coverflow with a ref property
You can use it to create some button
.reactjs-coverflow_Main {
position: relative;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.reactjs-coverflow_Coverflow {
width: 100%;
height: 100%;
display: flex;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500px;
perspective: 500px;
align-items: center;
transition: transform 0.7s;
}
.reactjs-coverflow_Element {
position: relative;
-webkit-box-reflect: below 1px -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)
20%, transparent 30%, transparent);
margin: auto 20px;
transition: transform 0.7s;
}
You can easely overwrite style properties.
Since 1.1.0 : Lodash dependencies has been removed.
Since 1.2.0 : New props rotate to define the rotation of a non-active element, New props translateX to define the initial translateX
Since 2.1.0 : Add a callback function onChange. If the position must change, the call back this.props.onChange will be call. This function will have one parameter, the new position (if you need to have the last position, I propose you to save it in your states)
Use Github issues for requests
reactjs-coverflow
is a community project and wouldn't be what it is without
contributions! We encourage and support contributions. The reactjs-coverflow
source code is released under the MIT License.
Feel free to fork and improve/enhance reactjs-coverflow
any way you want. If
you feel that reactjs-coverflow
will benefit from your changes, please open a
pull request.
If you want to custom the component there are some commands that can help you.
$npm install --dev
# Build component to lib/
$ npm run build
# Build source of site
$ npm run build-test
# Run test-server (default port: 4000)
$ npm run dev
# You can run all this command with the following command:
$ npm run dev
PS: In development, gulp is installed and watch the code. It automatically rebuild when you use npm run dev.
PS-2: Sorry if my english isn't perfect :p You can propose a merge request to correct some faults
FAQs
A coverflow module for React
The npm package reactjs-coverflow receives a total of 16 weekly downloads. As such, reactjs-coverflow popularity was classified as not popular.
We found that reactjs-coverflow 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.