React-simple-card NPM

React Simple Card

Simple, easy to use and flexible cards in React.

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.