https://github.com/bautistaaa/react-coverfl0w

https://github.com/bautistaaa/react-coverfl0w

Last synced: 23 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/bautistaaa/react-coverfl0w
• Owner: bautistaaa
• License: mit
• Created: 2020-12-06T21:40:13.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-11T22:13:56.000Z (almost 4 years ago)
• Last Synced: 2024-05-01T18:39:43.377Z (7 months ago)
• Language: TypeScript
• Size: 566 KB
• Stars: 21
• Watchers: 3
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
React Coverfl0w

===

[![npm version](https://badge.fury.io/js/react-coverfl0w.svg)](http://badge.fury.io/js/react-coverfl0w)

![gzip size](https://img.badgesize.io/https:/unpkg.com/react-coverfl0w?compression=gzip)

![](https://i.imgur.com/07Bbxbe.png)

## Installation

To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):

    $ npm install --save react-coverfl0w

## API documentation

| Name                 | Type      | Default                                 | Description                                             |

|----------------------|-----------|-----------------------------------------|---------------------------------------------------------|

| images               | Image[]   |                                         | Array of Images {src, href, alt}                        |

| className            | string    |                                         | Add css class to the coverflow for customization        |

| slidesPerSide        | number    |                                         | Number of images displayed on either side of the center |

| rotation              | number    | 45                                      | Rotation in degrees for inactive images                 |

| opacityInterval      | boolean   | [1, 0.8, 0.5, 0.2]                      | Define how you want images to "fade" out on the side    |

| scaleInterval        | boolean   | [1, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1]  | Define how you want images to scale down in size        |

## Usage

```tsx

import Coverflow, { Images } from "react-coverfl0w";

const IMAGES: Images[] = [

  {

    src:

      "myimage.png",

    href: "https://www.test.com",

    alt: "alt"

  },

  {

    src:

      "myimage.png",

    href: "https://www.test.com",

    alt: "alt"

  },

];

function App() {

  return (

    


      


        

      

    

  );

}


```

## Demos

* [Basic Demo](https://bautistaaa.github.io/react-coverfl0w/index.html)