Zemnmez / react-d3-sun-indicator

a nice little daytime indicator with react and d3 via reactive-d3

react-d3-sun-indicator

a nice little daylight indicator built with react and d3

This cute indicator demonstrates some techniques with React and d3. It automatically sizes to its container so it can be rendered and re-used anywhere.

Take a look here.

Install

yarn add react-d3-sun-indicator

Usage

import React, { Component } from 'react'

import SunIndicator from 'react-d3-sun-indicator';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {time: new Date()}
  }

  componentDidMount() {
    this.timer = setInterval(() => this.setState({
      time: new Date()
    }), 1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  render () {
    return (
      <div>
        <SunIndicator
          time={this.state.time}
          style={{width: "50vw", height: "50vh"}} />
      </div>
    )
  }
}

License

MIT © zemnmez