React-eazy-card NPM

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

Demo

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

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

No Header

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

No Body

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

No Footer

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

react-component

react-dom

@everything-registry/sub-chunk-2552 @infinitebrahmanuniverse/nolb-react-ea

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago