react-animated-3d-card-shadow

1.0.1 • Public • Published

react-animated-3d-card

Animated 3d card that reacts to the user's mouse pointer

Each component that is a child to the Card component will be animated in 3d, the top one being flush with the card and each subsequent one higher than the one on top of it

Code Demo

Credit card

NPM JavaScript Style Guide

Install

npm install --save react-animated-3d-card

Usage

import React, { Component } from 'react'

import Card from 'react-animated-3d-card'

class Example extends Component {
  render() {
    return <Card       
      style={{
        backgroundColor: 'red',
        width: '450px',
        height: '300px',
        cursor: 'pointer'
      }}
      onClick={() => console.log('Card clicked')}
    />
  }
}

Available props

Props Type Default value Explanation
style Object {} The style that will be applied to the card
onClick Function - The function that will run when the card is clicked
borderRadius String '20px' The radius of the card
isStatic Boolean false Whether the card is transformed in 3d or not
shineStrength Number 0.4 The strength of the shine from 0 to 1
cursorPointer Boolean true Whether the cursor is a pointer or not

Example

License

MIT © jamipuchi

Readme

Keywords

none

Package Sidebar

Install

npm i react-animated-3d-card-shadow

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

286 kB

Total Files

7

Last publish

Collaborators

  • luisivan