special-card v2.1.3

Special Card

⚡ Elegant React components for displaying cards with dynamic and interactive visual effects. ⚡

Description

The special-card library offers a unique visual touch to your React.js projects. With its HoloCard and PopCard components, create stylized interactive cards that are sure to engage your users.

Installation

To install the latest version:

npm install special-card

Usage

Import and use the components in your project:

import { HoloCard, PopCard } from 'special-card';

function App() {
  return (
    <div style={{ display: 'flex' }}>
      <PopCard 
        height={300}
        titleImage="/path/to/title.png"
        hoverImage="/path/to/hover.png"
        backgroundImage="/path/to/background.png"
        link="https://your-link.com"
      />
      <HoloCard
        height={300}
        width={300}
        radius={30}
        imageSrc="/path/to/image.png"
        imageShineSrc="/path/to/shine-image.png"
      />
    </div>
  );
}

export default App;

Documentation

HoloCard

PopCard

Complete Example

Below is an example of how to integrate the library:

// index.js
import React from 'react';
import { render } from "react-dom";
import { HoloCard, PopCard } from "special-card";

const App = () => (
  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
    <PopCard 
      height={300} 
      titleImage="/path/to/title.png"
      hoverImage="/path/to/hover.png"
      backgroundImage="/path/to/background.png"
      link="https://your-link.com"
    />
    <HoloCard
      height={300}
      width={300}
      radius={30}
      imageSrc="/path/to/image.png"
      imageShineSrc="/path/to/shine-image.png"
    />
  </div>
);

render(<App />, document.getElementById("root"));

Contributing

Contributions are always welcome. Please clone the repository and submit your pull requests here:

git clone https://github.com/LightInn/special-card.git

License

Distributed under the MIT License. See LICENSE for more information.