react-eazy-card

A React component card that eliminates the distortion of images and allows for the flexibility of card features.

Installation

npm install --save react-eazy-card

Usage

import { Card, CardHeader, CardImage, CardBody, CardFooter } from 'react-eazy-card';

class Demo extends Component {
  render() {
    return (
      <div>
        <Card>
          <CardHeader>
            <h2>Ab-Soul</h2>
          </CardHeader>
          <CardImage imageSrc="https://s3.amazonaws.com/hiphopdx-production/2013/11/Ab_Soul_304x304.jpg" />
          <CardBody>
            <p>
              Herbert Anthony Stevens IV is an American hip hop recording artist from Carson, California.
            </p>
          </CardBody>
          <CardFooter>
            <h3>Top Dawg Entertainment</h3>
          </CardFooter>
        </Card>
      </div>
    );
  }
}

<Card>

Property	Type	Description
children	Function	User must nest all components inside <Card> component
bgColor	String	User can change the default background color
fontColor	String	User can change the default font color
style	Object	User can add additional styles or overwrite the default ones

<CardHeader>

Property	Type	Description
children	Function	User can render child elements inside <CardHeader> component
style	Object	User can add additional styles or override the default ones

<CardImage>

Property	Type	Description
imageSrc	String	User can pass the image url to render inside <CardImage> component
style	Object	User can add additional styles or override the default ones

<CardBody>

Property	Type	Description
children	Function	User can render child elements inside <CardBody> component
style	Object	User can add additional styles or override the default ones

<CardFooter>

Property	Type	Description
children	Function	User can render child elements inside <CardFooter> component
style	Object	User can add additional styles or override the default ones

Examples

Card w/ Additional Styles

class Demo extends Component {
  render() {
    return (
      <div>
        <Card bgColor={'#000'} fontColor={'#fff'}>
          <CardHeader>
            <h2>Ab-Soul</h2>
          </CardHeader>
          <CardImage imageSrc="https://s3.amazonaws.com/hiphopdx-production/2013/11/Ab_Soul_304x304.jpg" />
          <CardBody>
            <p>
              Herbert Anthony Stevens IV is an American hip hop recording artist from Carson, California.
            </p>
          </CardBody>
          <CardFooter>
            <h3>Top Dawg Entertainment</h3>
          </CardFooter>
        </Card>
      </div>
    );
  }
}

Card w/o Header Component

class Demo extends Component {
  render() {
    return (
      <div>
        <Card>
          <CardImage imageSrc="https://s3.amazonaws.com/hiphopdx-production/2013/11/Ab_Soul_304x304.jpg" />
          <CardBody>
            <p>
              Herbert Anthony Stevens IV is an American hip hop recording artist from Carson, California.
            </p>
          </CardBody>
          <CardFooter>
            <h3>Top Dawg Entertainment</h3>
          </CardFooter>
        </Card>
      </div>
    );
  }
}

Card w/o Body Component

class Demo extends Component {
  render() {
    return (
      <div>
        <Card>
          <CardHeader>
            <h2>Ab-Soul</h2>
          </CardHeader>
          <CardImage imageSrc="https://s3.amazonaws.com/hiphopdx-production/2013/11/Ab_Soul_304x304.jpg" />
          <CardFooter>
            <h3>Top Dawg Entertainment</h3>
          </CardFooter>
        </Card>
      </div>
    );
  }
}

Card w/o Footer Component

class Demo extends Component {
  render() {
    return (
      <div>
        <Card>
          <CardHeader>
            <h2>Ab-Soul</h2>
          </CardHeader>
          <CardImage imageSrc="https://s3.amazonaws.com/hiphopdx-production/2013/11/Ab_Soul_304x304.jpg" />
          <CardBody>
            <p>
              Herbert Anthony Stevens IV is an American hip hop recording artist from Carson, California.
            </p>
          </CardBody>
        </Card>
      </div>
    );
  }
}

License

MIT License

Copyright (c) 2018 Sahil Mehta