How to find out what can be exported from npm package

Question

I'm trying to replicate this https://codepen.io/swizec/pen/bgvEvp

I've installed the d3-timer package with npm https://www.npmjs.com/package/d3-timer

It is definitely there because I have read through the files.

What I am confused about is how to import the timer into my code. In the code on codepen it just uses d3.timer but doesn't show the import above. So I tried importing d3 but it can't find it in the d3-timer package. I tried timer, Timer, D3, d3.

So my question is - how do I go about investigating the package to work out what the names of the exports are?

Or if that is too complicated - in this particular case what should I be importing to get the functionality of d3.timer?

Many thanks!

Code from code pen:

const Component = React.Component;

const Ball = ({ x, y }) => (
  <circle cx={x} cy={y} r={5} />
);

const MAX_H = 750;

class App extends Component {
  constructor() {
    super();

    this.state = {
      y: 5,
      vy: 0
    }
  }

  componentDidMount() {
    this.timer = d3.timer(() => this.gameLoop());
    this.gameLoop();
  }

  componentWillUnmount() {
    this.timer.stop();
  }

  gameLoop() {
    let { y, vy } = this.state;

    if (y > MAX_H) {
      vy = -vy*.87;
    }

    this.setState({
      y: y+vy,
      vy: vy+0.3
    })

  }

  render() {
    return (
      <svg width="100%" height={MAX_H}>
        <Ball x={50} y={this.state.y} />
      </svg>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

my code

import React from 'react';
import d3 from 'd3-timer'

const Component = React.Component;


const Ball = ({ x, y }) => (
    <circle cx={x} cy={y} r={5} />
);

const MAX_H = 750;

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

    this.state = {
      y: 5,
      vy: 0
    }
  }

  componentDidMount() {
    this.timer = d3.timer(() => this.gameLoop());
    this.gameLoop();
  }

  componentWillUnmount() {
    this.timer.stop();
  }

  gameLoop() {
    let { y, vy } = this.state;

    if (y > MAX_H) {
      vy = -vy*.87;
    }

    this.setState({
      y: y+vy,
      vy: vy+0.3
    })

  }

  render() {
    return (
        <svg width="100%" height={MAX_H}>
          <Ball x={50} y={this.state.y} />
        </svg>
    )
  }
}

Error message:

Attempted import error: 'd3-timer' does not contain a default export (imported as 'd3').

Answer 1

Try

import { timer } from 'd3-timer' and then use timer()