react-card

Synopsis

Simple-react-card is a React component that provides you with a simple material design card. Its simple, flexible and at thesame time advanced enough your needs.

Code Example

Checkout the Demo for code examples or the view the Api Here.

Installation

npm install --save simple-react-card

API Reference

Basic Card

import React, {Component} from 'react'
import { BaseCard } from 'simple-react-card'
export default class BasicCardTest extends Component {
  render () {
    const header = {image: 'https://unsplash.it/200/300',
        title: 'Doyin Olarewaju',
        subtitle: 'Most awesome'
    }
    const button = [
      <button className='btn btn-block btn-success'>test</button>,
      <button className='btn btn-block btn-info'>test</button>,
      <button className='btn btn-block btn-danger'>test</button>,
      <button className='btn btn-block btn-warning'>test</button>
    ]
    return (
        <BaseCard header={header} buttons={buttons}>
            <h2>This is not a drill, this is the real deal</h2>
        </BaseCard>
    )
  }

| Property | Type | Description | | :--- | :---: | ---: | | header | object | Information in the Card header. It should contain these options: image(url), title and subtitle. They are all optional|
| buttons | array | An array of buttons with your styling and event handlers| | verticalButtons | boolean | Align the button vertically or horizontally. Default is horizontally. So leave out this option if you need horizontal buttons |

All properties are optional. You can decide to exclude any of them.

Media Card

import React, {Component} from 'react'
import { MediaCard } from 'simple-react-card'
export default class MediaCardTest extends Component {

  testButton(){
    console.log('perform some action')
  }

  render () {
    const header = {image: 'https://unsplash.it/200/300',
        title: 'Doyin Olarewaju',
        subtitle: 'Most awesome'
    }
    const button = [
      <button className='btn btn-block btn-success' onClick={this.testButton.bind(this)}>test</button>,
      <button className='btn btn-block btn-info'>test</button>,
      <button className='btn btn-block btn-danger'>test</button>,
      <button className='btn btn-block btn-warning'>test</button>
    ]
    // used thesame image from the header variable
    const media = {
        image: header.image,
        title: 'Title',
        subtitle: 'Just a test'
    }
    // just appended a new property to the object since i want to use thesame set of properties
    const bigMedia = Object.assign({mediaStyle: {height: '300px'}}, media) 
    return (
        <MediaCard header={header} bigMedia={bigMedia} />

          <MediaCard header={header}
            titleRightMedia={media}
            buttons={buttons}>
            <h1>This is not a drill, this is the real deal</h1>
          </MediaCard>

          <MediaCard header={header} titleLeftMedia={media}
            buttons={buttons} verticalButtons>
            <h3>Some Content</h3>
          </MediaCard>
    )
  }

| Property | Type | Description | | :--- | :---: | ---: | | header | object | Contents of the Card header. It should contain these options: image(url), title and subtitle. They are all optional|
| buttons | array | An array of buttons with your styling and event handlers| | verticalButtons | boolean | Align the button vertically or horizontally. Default is horizontally. So leave out this option if you need horizontal buttons | | bigMedia | object | Contents of the Card header. It should contain these options: image(url), title, subtitle, mediaStyle. They are all optional| | titleLeftMedia | object | Contents of the Card header. It should contain these options: image(url), title, subtitle, mediaStyle. They are all optional| | titleRightMedia| object | Contents of the Card header. It should contain these options: image(url), title, subtitle, mediaStyle. They are all optional|

mediaStyle is used to style all the images. The big, right or left image. All properties are optional. You can decide to exclude any of them.

Contributors

You can report your issues here or you can send me an email [email protected]. I will be happy to help. Pull Requests are also welcome.