Toggleable Cards With Images For React

A React component to create accordion-style toggleable cards with images.

How to use it:

1. Install & Import:

# NPM
$ npm i react-card-with-image --save
import React from 'react'
import { CardView } from 'react-card-with-image'
import 'react-card-with-image/dist/index.css'

2. Add cards together with images and descriptions as follows:

const App = () => {
  const items = [
    {
      id: 1,
      header: 'Image 1',
      description: 'Description 1',
      image: '1.jpg'
    },
    {
      id: 2,
      header: 'Image 2',
      description: 'Description 2',
      image: '2.jpg'
    },
    {
      id: 3,
      header: 'Image 3',
      description: 'Description 3',
      image: '3.jpg'
    },
    // ... 
  ]
  return (
    <CardView
      items={items}
      activeColor='#222'
      imageHeight='450px'
      imageWidth='600px'
    />
  )
}
export default App

Preview:

Toggleable Cards With Images For React

Download Details:

Author: cappydh

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/cappydh/react-card-with-image

License: MIT

You Might Be Interested In:

Add Comment