React Simple Card

Simple, easy to use and flexible cards in React.

Installation
Usage
Examples
Development
Contributing

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.

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

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

Examples

Basic layout - Card, CardHeader, CardBody, CardFooter
Basic layout with Image header instead - Card, ImageHeader, CardBody, CardFooter
Without header - Card, CardBody, CardFooter
Body only - Card, CardBody

Alternatively, you can find examples in /examples folder.

Development

npm run setup - Install all npm and flow-typed packages
npm test - Run all tests (Jest)
npm run flow - Run static type checker (Flow)

Contributing

Please check CONTRIBUTING.md to get started.

License

MIT License

juniorrosul/react-simple-card