Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-simple-card

2.0.2 • Public • Published

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

License

MIT License

Copyright (c) 2019 Edvins Antonovs.

Keywords

Install

npm i react-simple-card

DownloadsWeekly Downloads

440

Version

2.0.2

License

MIT

Unpacked Size

59.2 kB

Total Files

17

Last publish

Collaborators

  • avatar