react-responsive-cards

A React library to quickly build a responsive grid of cards.

Demo

View demo here

Material UI

React responsive cards is built using material-ui as a peer dependency. The consuming app should also install the following:

npm install @material-ui/core --save
npm install @material-ui/icons --save

Note - that react-responsive-cards will work with material ui components. For example, it will take a material ui component and build the card footer.

Install

npm install --save react-responsive-cards

Usage

import React from 'react'

import { Cards } from 'react-responsive-cards'

const App = () => {
  const details = [
    {
      title: 'The Card Title',
      description: 'This is a short description',
      image: 'https://<image_here>.jpg',
      renderFooter: <div>{'Custom JSX'}</div>,
      handleOnClick: () => alert('Custom Event')
    }
  ]

  return <Cards details={details} />
}

export default App

Props

PropName	isRequired	Type	Description
details	yes	Object[]	An array of objects that build up the card details
image	no	sring	Card image
renderFooter	no	JSX	Allows custom JSX to generate footer
handleOnClick	no	Fn	Allows a user to set event handler on entire card

License

MIT © ChaseHardin