Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
reactjs-coverflow
Advanced tools
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
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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.