React-ocard NPM

React-oCard

The Card style information presentation on mobile devise :iphone:

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

NPM
UMD https://unpkg.com/react-ocard/umd/react-ocard.js

Usage

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

import Ocard and react-ocard.css

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

setting props story
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)
        }
    ]
}