react-simple-card
Simple React card component
Last updated 2 years ago by ummahusla .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-simple-card 
SYNC missed versions from official npm registry.

React Simple Card

Build Status Coverage Status

Simple, easy to use and flexible cards in React.

Table of Contents

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 <CardBody> 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 <CardFooter> component.
style Object Allows to pass an object of CSS styles, to update or overwrite the default ones.

Examples

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

Copyright (c) 2017 Edvins Antonovs.

Current Tags

  • 1.0.11                                ...           latest (2 years ago)

10 Versions

  • 1.0.11                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |