Card style presentation with React in the mobile device, it's inspired by Yahoo youcard(懶人卡)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
src
tests
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
nwb.config.js
package-lock.json
package.json

README.md

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.