React-oCard
The Card style information presentation on mobile devise 📱
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!
- import
Ocard
andreact-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 />
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 { return <div ="App"> <Ocard /> </div> ; } ;
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.