special-card

2.1.3 • Public • Published

Special Card

Elegant React components for displaying cards with dynamic and interactive visual effects.Build Status npm version npm downloads license

Special Card Holo Special Card Pop

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

Prop Type Description Default
imageSrc string Path to the card image Required
imageShineSrc string Path to the shine effect image Required
width number Width of the card Required
height number Height of the card Required
hyp number Intensity of the holographic effect 0.8
o number Opacity of the shine effect 0.4
radius number Radius of the card corners 16

PopCard

Prop Type Description Default
backgroundImage string Path to the background image /bg.png
titleImage string Path to the title image /title.png
hoverImage string Path to the hover image /hover.png
link string URL link on card click https://brev.al
height number Height of the card 300
width number Width of the card height / 1.5

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.


Package Sidebar

Install

npm i special-card

Weekly Downloads

2

Version

2.1.3

License

ISC

Unpacked Size

19.6 kB

Total Files

9

Last publish

Collaborators

  • lightin