Toggleable Cards With Images For React

Category: Others , React
Author:cappydh
Views Total:9 views
Official Page:Go to website
Publish Date:September 2, 2020
License:MIT

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

You Might Be Interested In:

Leave a Reply