react-card-component

React Card Component

Usage no npm install needed!

<script type="module">
  import reactCardComponent from 'https://cdn.skypack.dev/react-card-component';
</script>

README

Build Status myPc license

react-card-component

Don't Use It It's not finished

License

  • MIT License

Install

  npm i react-card-component

Demo & Examples

Demo

Props

glass, glassOption

  import { Card } from 'react-card-component';

  // default blur:4, transparency:0.2
  const NewCard = () => <Card glass><div>HelloWorld</div></Card>);

  const NewCard = () => <Card glass glassOption={{blur:5,transparency: 0.1}}><div>HelloWorld</div></Card>);

style

  import Card from 'react-card-component';
  const NewCard = () => <Card style={{"color":"red"}}><div>HelloWorld</div></Card>);

background

  import Card from 'react-card-component';
  const NewCard = () => <Card background={"red"}><div>HelloWorld</div></Card>);

hoverType

  type hoverMoveType = 'up' | 'left' | `right` | `down` | 'zoom'

  import Card from 'react-card-component';
  const NewCard = () => <Card hoverType={"zoom"}><div>HelloWorld</div></Card>);

bordered


  import Card from 'react-card-component';
  const NewCard = () => <Card bordered><div>HelloWorld</div></Card>);

outlined


  import Card from 'react-card-component';
  const NewCard = () => <Card outlined><div>HelloWorld</div></Card>);