mt-ad-space

A light-weight React mt-ad-space component with extremely easy API（只适用于移动端项目）. Online Demo, welcome code review

Installation

npm install mt-ad-space --save

Usage

import React, { PureComponent } from 'react';
import img1 from './static/images/11.jpg';
import img2 from './static/images/12.jpg';
import img3 from './static/images/13.jpg';
import img4 from './static/images/14.jpg';
import img5 from './static/images/15.jpg';
import img6 from './static/images/16.png';
import AdSpace from 'mt-ad-space';
import './app.css';

const source = [img1, img2, img3, ];
const source_2 = [[img1, img2], [img3, img4], [img5, img6]];

export default class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      indicator: 0,
    };
  }

  render() {
    return (
      <div className="container">
        <div style={{ height: 200 }}></div>
        <AdSpace 
          width={320}
          spacing={10}
          onChange={(indicator) => {
            this.setState({ indicator })
          }}
        >
          {
            source.map((item, key) =>
              <div key={key} className="item">
                <img src={item} />
              </div>
            )
          }
        </AdSpace>
        <h1>{this.state.indicator}</h1>
        <AdSpace 
          width={320}
          spacing={10}
        >
          {
            source_2.map((item, key) =>
              <ul key={key} className="ad-space">
                {
                  item.map(it =>
                    <li className="ad-space-item" key={it}>
                      <img src={it} />
                    </li>
                  )
                }
              </ul>
            )
          }
        </AdSpace>
      </div>
    );
  }
}

props

| param | detail | type | default | | ---------------- | -----------------------------------------------| -------- | ------- | | width | component width | number | isRequired | | spacing | spacing between each element | number | isRequired | | children | child node of component | array | [] | | onChange | callback function when channel changes | function | empty |