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.

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

const App = () => (

Header
Body
Footer

);

render(, document.getElementById('root'));
`

The simplest example with the instead of .

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

const App = () => (


Body
Footer

);

render(, document.getElementById('root'));
`

Usable properties

$3

| Property | Type | Description |
| :---------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | Function | Allows to nest any components inside component. This is the place where to , , , . |
| 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. |

$3

| Property | Type | Description |
| :---------- | :------- | :------------------------------------------------------------------------------------------------------------------------------ |
| children | Function | Allows to render child elements inside the component. Perfect section to place

,

,

, 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. |

$3

| 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. |

$3

| 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. |

$3

| 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.