react-update-lint

Example

import UpdateLint from 'react-update-lint';
import React, {Component} from 'react';

var todayUpdate = {
    id: '2017/03/22',
    title: <h4>更新通知</h4>,
    description: <div>
        <ul>
            <li>增加活动对比功能。</li>
            <li>增加活动。</li>
            <li>增加活动按部门，分类，模板查找的功能。</li>
        </ul>
    </div>
}

var config = {
    style: {
        height: 100, //this should be min-height
        width: 300
    },
    lint: todayUpdate
}

export default class Linter extends Component {
    render () {
        return <UpdateLint config={config}>
            <UpdateLint.LintTitle/>
            <UpdateLint.LintDescription/>
            <UpdateLint.IKnowBtn>
                <input type="button" value="I KNOW IT!"/>
            </UpdateLint.IKnowBtn>
        </UpdateLint>
    }
}

as follow screenshot it can easily work with other UI components, following is antd.

import UpdateLint from 'react-update-lint';
import React, {Component} from 'react';
import { Card, Button } from 'antd';

var todayUpdate = {
    id: '2017/03/21',
    title: <h4>Updating ack</h4>,
    description: <div>
        <p>add new feture xxx!</p>
        <p>add new feture yyy!</p>
    </div>
}

var config = {
    style: {
        height: 100, //this should be min-height
        width: 500
    },
    lint: todayUpdate
}

export default class Linter extends Component {
    render () {
        return <UpdateLint config={config}>
            <Card title={<UpdateLint.LintTitle/>} extra={<a href="#wiki">see detail</a>}>
                <UpdateLint.LintDescription/>
                <UpdateLint.IKnowBtn>
                    <div style={{
                        marginTop: '10px'
                    }}>
                        <Button type="primary">I know</Button>
                    </div>
                </UpdateLint.IKnowBtn>
            </Card>
        </UpdateLint>
    }
}