Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React-oCard

The Card style information presentation on mobile devise 📱

Travis npm package Coveralls LICENCE

About React-oCard

React-oCard was created with nwb, and it's inspired by Yahoo youcard, use ReactJS, iScroll, ES6, SCSS and Mocha etc.

Installation

Usage

React-oCard is really easy to use, just a few seconds, then you can have your awesome CARD for your story!

  1. import Ocard and react-ocard.css
import Ocard from 'react-ocard';
import from 'react-ocard/css/react-ocard.css';
  1. setting props story
  2. put Ocard with story in your app
<Ocard {...story} />

Example

const YOUR_STORY = {
    cover: {
        img: 'your_img_url',
        title: 'your_story_titile',
        subTitle: 'your_story_subtitile'
    },
    cards: [
        {
            type: 'story',
            img: 'story_img_url',
            title: 'your_title',
            content: 'your_content',
            reference: 'your_reference'
        }
    ]
}
import React, { Component } from 'react';

import OCard from 'react-ocard';
import 'react-ocard/css/react-ocard.css'

// ... write YOUR_STORY

class App extends Component {
    render() {
        return (
            <div className="App">
                <Ocard {...YOUR_STORY}/>
            </div>
        );
    }
}

export default App;

Structure of story(props) for Ocard component

A story includes cover (object) and cards (array), you can also follow this structure build the json file.

const story = {
    cover: {
        img,        // Cover image (should be an url)
        title,      // Title of cover (should be string or html)
        subTitle    // Subtitle of cover (should be string or html)
    },
    cards: [
        {
            type: 'story',  // Now only have two types to use 'story', 'author' and 'embed'
            img,            // when use 'story', you can set up the image (should be an url)
            embed,          // when use 'embed', you can set up the embed (should be an iframe tag, ex. youtube video)
            avatar,         // when use 'author', you can set up image and avatar (should be an url)
            title,          // Title of this card (should be string or html)
            content,        // Content of this card (should be string or html)
            reference       // Reference of this car (should be string or html, and ref can be empty)
        }
    ]
}

Development

This Component is still under development, if you have any suggestion, please give an issue or fork this repo

License

React-oCard is released under the MIT license.

About

Card style presentation with React in the mobile device, it's inspired by Yahoo youcard(懶人卡)

Topics

Resources

License

Releases

No releases published

Packages

No packages published