Nonchalantly Perusing Magazines

    @n1ru4l/react-time-ago

    1.1.0 • Public • Published

    @n1ru4l/react-time-ago

    npm version CircleCI dependency status dev dependency status Commitizen friendly

    A component for updating the format of a date based on the elapsed time. The formatter is pluggable and extensible. By default it will use now, X minute(s) ago, X hour(s) ago and X day(s) ago. It uses the renderProp pattern to give you full control over how stuff is rendered. Internally it uses zen-observable.

    Demo: https://codesandbox.io/s/34423v2v26

    Differences to other available solutions:

    • Works on react for the web and react-native.
    • Instead of checking all dates at a given interval it checks and updates single dates only when necessary

    Install

    yarn add @n1ru4l/react-time-ago

    Usage

    Default

    import ReactDOM from 'react-dom'
    import React from 'react'
    import { TimeAgo } from '@n1ru4l/react-time-ago'
     
    ReactDOM.render(
      <TimeAgo
        date={new Date()}
        render={({ error, value }) => <span>{value}</span>}
      />,
      document.querySelector(`#main`)
    )

    or

    import ReactDOM from 'react-dom'
    import React from 'react'
    import { TimeAgo } from '@n1ru4l/react-time-ago'
     
    ReactDOM.render(
      <TimeAgo>{({ error, value }) => <span>{value}</span>}</TimeAgo>,
      document.querySelector(`#main`)
    )

    Custom Date Formatter

    import ReactDOM from 'react-dom'
    import React from 'react'
    import { TimeAgo } from '@n1ru4l/react-time-ago'
     
    const minuteSeconds = 60
    const hourSeconds = minuteSeconds * 60
    const daySeconds = hourSeconds * 24
     
    function formatter(date, now) {
      const d = now - date
     
      if (< minuteSeconds * 2) {
        return {
          value: `now`, // this is the value should be displayed
          next: minuteSeconds * 2 - d, // this number is used to schedule the next update of a value
        }
      } else if (< hourSeconds) {
        const minutes = Math.floor(/ minuteSeconds)
        return {
          value: `${minutes} minutes ago`,
          next: minuteSeconds - d % 60,
        }
      } else if (< daySeconds) {
        const hours = Math.floor(/ hourSeconds)
        return {
          value: `${hours} hour${hours > 1 ? `s` : ``} ago`,
          next: hourSeconds - d % hourSeconds,
        }
      } else {
        const days = Math.floor(/ daySeconds)
        return {
          value: `${days} day${days > 1 ? `s` : ``} ago`,
          next: daySeconds - d % daySeconds,
        }
      }
    }
     
    ReactDOM.render(
      <TimeAgo date={new Date()} formatter={formatter}>
        {({ error, value }) => <span>{value}</span>}
      </TimeAgo>,
      document.querySelector(`#main`)
    )

    API Docs

    TODO

    Contributing

    This repository follows semantic versioning. A short introduction can be found here.

    This repository also uses semantic-release for managing the releases.

    Please fork this repository and checkout your clone. Here is a short guide for doing so.

    Pull requests should be made to the master branch. Therefore if you develop you should always branch off master.

    Install the dependencies using yarn.

    Please to use yarn cm for committing changes.

    Create your Pull Request as soon as possible. So you can obtain feedback early and prevent multiple people working on the same thing.

    Make sure all changes you make are covered by tests. You can run those with yarn test. Also you can run the interactive watch mode (yarn test --watch). This repository is using jest for testing.

    Keywords

    Install

    npm i @n1ru4l/react-time-ago

    DownloadsWeekly Downloads

    138

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    26.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • n1ru4l