React Simple Card

Simple, easy to use and flexible cards in React.

Table of Contents

• Installation
• Usage

Installation

npm install --save react-simple-card

Usage

The simplest example.

import React from 'react';
import { render } from 'react-dom';
import { Card, CardHeader, CardBody, CardFooter } from 'react-simple-card';

const App = () => (
    <Card>
        <CardHeader>Header</CardHeader>
        <CardBody>Body</CardBody>
        <CardFooter>Footer</CardFooter>
    </Card>
);

render(<App />, document.getElementById('root'));

The simplest example with the <ImageHeader> instead of <CardHeader>.

import React from 'react';
import { render } from 'react-dom';
import { Card, CardHeader, CardBody, CardFooter } from 'react-simple-card';

const App = () => (
    <Card>
        <ImageHeader imageSrc="http://via.placeholder.com/600x250" />
        <CardBody>Body</CardBody>
        <CardFooter>Footer</CardFooter>
    </Card>
);

render(<App />, document.getElementById('root'));

Usable properties

<Card>

| Property | Type | Description | | :---------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | | children | Function | Allows to nest any components inside <Card> component. This is the place where to <CardHeader>, <ImageHeader>, <CardBody>, <CardFooter>. | | bgColor | String | Allows to change the default #fff background. | | fontColor | String | Allows to change the default #000 font color by passing a new value. | | style | Object | Allows to pass an object of CSS styles, to update or overwrite the default ones. | | className | String | Allows to pass extra class names to the component. |

<CardHeader>

| Property | Type | Description | | :---------- | :------- | :------------------------------------------------------------------------------------------------------------------------------ | | children | Function | Allows to render child elements inside the <CardHeader> component. Perfect section to place <h1>, <h2>, <h3>, etc tags. | | style | Object | Allows to pass an object of CSS styles, to update or overwrite the default ones. | | className | String | Allows to pass extra class names to the component. |

<ImageHeader>

| Property | Type | Description | | :---------- | :----- | :------------------------------------------------------------------------------- | | imageSrc | String | Allows to pass the image URL which will be rendered inside the component. | | style | Object | Allows to pass an object of CSS styles, to update or overwrite the default ones. | | className | String | Allows to pass extra class names to the component. |

<CardBody>

| Property | Type | Description | | :---------- | :------- | :------------------------------------------------------------------------------------------------------------- | | children | Function | Allows to render child elements inside the component. Good idea to use it to pass inner components. | | style | Object | Allows to pass an object of CSS styles, to update or overwrite the default ones. | | className | String | Allows to pass extra class names to the component. |

<CardFooter>

| Property | Type | Description | | :---------- | :------- | :------------------------------------------------------------------------------- | | children | Function | Allows to render child elements inside the component. | | style | Object | Allows to pass an object of CSS styles, to update or overwrite the default ones. | | className | String | Allows to pass extra class names to the component. |

License

MIT License

Copyright (c) 2019 Edvins Antonovs.