react-timeago: Unknown prop `now` on

Hi @nmn , Just you need to remove now props when the Komponent is time since time is a built-in and does not have an attribute called now.

Otherwise, the browser will fire the following error: image

I will create PR if I got time. OK ?

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 21 (2 by maintainers)

Most upvoted comments

@albertogasparin : I created a PR #86 for that . I hope to be merged soon .

Yeah, damn, I’ve been terrible lately. I’ll get on it.

Any idea when this will be published to npm?

done.

If you’ve already got Moment in your project (as mentioned above, it’s not a small dependency), here’s a minimal drop-in replacement with live-updating:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

const makeRelative = (dateMoment) => {
  if (!dateMoment.isValid()) { return ''; }
  return dateMoment.fromNow();
};
const DELAY = 60000; // 1 minute

export default class TimeAgo extends PureComponent {
  static propTypes = {
    date: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.instanceOf(Date),
    ]).isRequired,
  }

  constructor(props) {
    super(props);

    const { date } = props;
    const dateMoment = moment(date);
    const relative = makeRelative(dateMoment);
    this.state = {
      dateMoment,
      relative,
    };
  }

  componentDidMount() {
    const { dateMoment } = this.state;
    if (dateMoment && dateMoment.isSame(moment(), 'day')) {
      // Only start recalculating if it's a recent date (sometime today)
      this.startUpdating();
    }
  }

  componentWillReceiveProps(nextProps) {
    const { date } = this.props;
    const { date: newDate } = nextProps;

    if (newDate !== date) {
      const dateMoment = moment(newDate);
      if (dateMoment.isSame(moment(), 'day')) {
        // This is a recent date (sometime today)
        this.startUpdating();
      } else {
        // This date is old enough that it doesn't need updating
        this.stopUpdating();
      }
      const relative = makeRelative(dateMoment);
      this.setState({
        dateMoment,
        relative,
      });
    }
  }

  componentWillUnmount() {
    this.stopUpdating();
  }

  recalculate = () => {
    const { dateMoment, relative } = this.state;
    const newRelative = makeRelative(dateMoment);
    if (newRelative !== relative) {
      this.setState({ relative: newRelative });
    }
  }

  startUpdating = () => {
    if (this.interval == null) {
      this.interval = setInterval(this.recalculate, DELAY);
    }
  }

  stopUpdating = () => {
    if (this.interval != null) {
      clearInterval(this.interval);
      this.interval = null;
    }
  }

  render() {
    const { relative } = this.state;

    return (
      <span>{relative}</span>
    );
  }
}

Thanks, looking forward to it @nmn

@scf4 actually the fix is already there, but the /lib folder was not rebuilt a published to npm. The latest code works, it’s just not in npm. 😦