react-taipei-metro v1.0.4

react-taipei-metro

Extensible React Component for Taipei Metro Map.

See the demo here.

Install

npm install react-taipei-metro

Example

import React from 'react';
import ReactDOM from 'react-dom';
import MetroMap from 'react-taipei-metro';

class Window extends React.Component {
  // Customized overlay when mouse hovers over the station.
  renderOverlay(station) {
    // Return a Promise if you fetch data with asynchronous methods.
    return new Promise((resolve) => {
      setTimeout(() => resolve((<span>{station.name.en}</span>)), 500);
    });
    // Or simply return a jsx.
    // return (<span>{userData.foo.bar}</span>);
  }

  // You can also render customized svg elements for each station.
  renderCustomizedContent(station, i, scale) {
    return (<text key={i} x={station.center.x} y={station.center.y}
        fontSize={10 * scale} fill={this.textColor}
        alignmentBaseline='middle' textAnchor='middle'>{station.name.en.length}</text>);
  }

  // See Props for more details.
  render() {
    return (<MetroMap
      width={800} height={900}
      showStationName={true} showOverlay={true}
      renderOverlay={station => this.renderOverlay(station)}
      renderUserData={(station, i, scale) => this.renderCustomizedContent(station, i, scale)} />);
  }
}

ReactDOM.render(
  <Window />,
  document.getElementById('root')
);

Props

Function arguments

• station

{
  name: { en: 'Yuanshan', zh: '圓山' },
  center: { x: 365, y: 373 },
  lines: ['R']
}

• i: station index
• scale: min(props.width / 800, props.height / 900)

Build

npm run build