DEV Community

Cover image for Create a Card component with React and styled-components
0xkoji
0xkoji

Posted on • Updated on

Create a Card component with React and styled-components

https://codesandbox.io/s/nameless-worker-z31nt

Added the tilt effect to cards by react-parallax-tilt

GitHub logo mkosir / react-parallax-tilt

๐Ÿ‘€ Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)

React Tilt

npm version npm downloads npm bundle size Open issues TypeScript semantic-release

CI CI CI CI CI Codecov Coverage

CI CI

๐Ÿ‘€ Easily apply tilt hover effect on React components

Demo ๐Ÿ’ฅ

Install

npm install react-parallax-tilt
Enter fullscreen mode Exit fullscreen mode

Features

  • Lightweight (โ‰ˆ3kB), zero dependencies ๐Ÿ“ฆ
  • Tree-shakable ๐ŸŒณ ESM and CommonJS support
  • Works with React v15 onwards
  • Supports mouse and touch events
  • Support for device tilting (gyroscope)
  • Glare effect ๐ŸŒŸ with custom props (color, position,...) ๐Ÿ”—demo
  • Events to keep track of component values ๐Ÿ“ (tilt, glare, mousemove,...) ๐Ÿ”—demo
  • Many effects that can be easily applied

Example

import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';
const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

https://codesandbox.io/embed/nameless-worker-z31nt?fontsize=14&hidenavigation=1&theme=dark

Top comments (0)