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

<Ocard {...story} />

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;

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)
        }
    ]
}