react-simple-card
Simple React card component
Last updated 7 months 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.
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 <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.
className String Allows to pass extra class names to the component.

License

MIT License

Copyright (c) 2019 Edvins Antonovs.

Current Tags

  • 2.0.2                                ...           latest (7 months ago)

13 Versions

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

Copyright 2014 - 2016 © taobao.org |