A responsive event timeline in React.js

Overview

react-event-timeline

React component to generate a responsive vertical event timeline

npm version Build Status codecov license

alt tag

Storybook demos here: https://rcdexta.github.io/react-event-timeline

CodeSandbox version to play with examples (in typescript):

Edit Timeline Example

Note: CodeSandbox version has predefined styles and icons loaded in index.html for better presentation!

Features

  • Is lightweight
  • Responsive and extensible
  • Configurable and customizable

Getting started

To install as npm dependency

npm install --save react-event-timeline

or if you use yarn

yarn add react-event-timeline

Usage

The following snippet generates the timeline you see in the screenshot:

textsms} > I received the payment for $543. Should be shipping the item within a couple of hours. email} > Like we talked, you said that you would share the shipment details? This is an urgent order and so I am losing patience. Can you expedite the process and pls do share the details asap. Consider this a gentle reminder if you are on track already! , document.getElementById('container') );">
import {Timeline, TimelineEvent} from 'react-event-timeline'

ReactDOM.render(
    <Timeline>
            <TimelineEvent title="John Doe sent a SMS"
                           createdAt="2016-09-12 10:06 PM"
                           icon={<i className="material-icons md-18">textsms</i>}
            >
                I received the payment for $543. Should be shipping the item within a couple of hours.
            </TimelineEvent>
            <TimelineEvent
                title="You sent an email to John Doe"
                createdAt="2016-09-11 09:06 AM"
                icon={<i className="material-icons md-18">email</i>}
            >
                Like we talked, you said that you would share the shipment details? This is an urgent order and so I
                    am losing patience. Can you expedite the process and pls do share the details asap. Consider this a
                    gentle reminder if you are on track already!
            </TimelineEvent>
    </Timeline>,
      document.getElementById('container')
);

Please refer storybook to check code for all the examples in the storybook demo.

API Documentation

Timeline

This is the wrapper component that creates the infinite vertical timeline

Name Type Description
className string The css class name of timeline container
style object Override inline styles of timeline container
orientation string Display the timeline on right or left. Default: left
lineColor string CSS color code to override the line color
lineStyle string Override the appearance of line with custom css styling

TimelineEvent

Each event in the timeline will be represented by the TimelineEvent component. There can be multiple repeating instances of this component inside Timeline wrapper

Name Type Description
title node The title of the event. Can be string or any DOM element node(s)
createdAt node The time at which the event occurred. Can be datetime string or any DOM element node(s)
subtitle node If you prefer having the title at the top and some caption below, omit createdAt and specify title and subtitle
icon node The icon to show as event lable. Can be a SVG or font icon
iconStyle object Custom CSS styling for the icon
bubbleStyle object Custom CSS styling for the bubble containing the icon
buttons node Action buttons to display to the right of the event content
contentStyle node Override content style
container string Optional value card will render event as a Card
style object Override style for the entire event container. Can be used to modify card appearance if container is selected as card
titleStyle object Override style for the title content
subtitleStyle object Override style for the subtitle content
cardHeaderStyle object Override style for the card header if container is card
collapsible boolean Make the timeline event collapse body content
showContent boolean if collapsible is true, should content be shown by default. false is default value

TimelineBlip

Use this component if your event footprint is too small and can be described in a single line

Name Type Description
title node The title of the event. Can be string or any DOM element node(s)
icon node The icon to show as event label. Can be a SVG or font icon
iconColor string CSS color code for icon
iconStyle object Custom CSS styling for the icon
style object Override style for the entire event container

Refer to Condensed Timeline in Storybook for examples of using this component.

Development

This project recommends using react-storybook as a UI component development environment. Use the following scripts for your development workflow:

  1. npm run storybook: Start developing by using storybook
  2. npm run lint : Lint all js files
  3. npm run lintfix : fix linting errors of all js files
  4. npm run build: transpile all ES6 component files into ES5(commonjs) and put it in dist directory
  5. npm run docs: create static build of storybook in docs directory that can be used for github pages

The storybook artefacts can be found in stories folder. Run npm run storybook and you should see your code changes hot reloaded on the browser

Also use semantic-release to automate release to npm. Use npm run commit to commit your changes and raise a PR.

Acknowledgements

This project is graciously supported by IDE tools offered by JetBrains for development.

alt tag

License

MIT

Comments
  • React 16 Support

    React 16 Support

    An older version of React is being loaded as a dependency:

    https://github.com/rcdexta/react-event-timeline/blob/31c91670c26322e03ba42b9b4cc267e3222be8c3/package.json#L79-L82

    I think it should be loaded as per dependency.

    opened by aogaili 8
  • Dynamically update createdAt after every cycle.

    Dynamically update createdAt after every cycle.

    I want to display createdAt time in "time ago" format which is updated after every 5 seconds. I've created function to display time in that format now cc how can I dynamically update the display.I change value of var which display 0 sec ago after every 10 sec but it's not updating the view. ps:please excuse the content of feed 😆

    opened by oztek22 5
  • Fixed default prop-types

    Fixed default prop-types

    Fixed default prop types ( for TypeScript )

    • [x] Added Types tests
    • [x] Added Snapshot tests
    • [x] Upgrade babel
    • [x] Upgrade @storybook monorepo ( with *-loader )
    • [x] Upgrade eslint
    • [x] coverage report post
    opened by 9renpoto 4
  • Styling the card view

    Styling the card view

    Hi, nice project.

    I would like to style the card header, looks like it is hardcoded into here: https://github.com/rcdexta/react-event-timeline/blob/master/components/TimelineEvent.js#L43

    Would be nice to have a new prop to be able to style this.

    Thanks!

    opened by hashwin 4
  • rename createdAt to subtitle

    rename createdAt to subtitle

    I think it's better to have a title and a subtitle to keep the terms more generic. This because there isn't anything special happening with the createdAt anyway. It's just a node, just like title, icon and children.

    So, I guess it's better to rename title to subtitle and createdAt to title (because a subtitle should be standing below the title).

    opened by smeijer 4
  • Build(deps-dev): Bump @types/react from 16.7.13 to 16.8.22

    Build(deps-dev): Bump @types/react from 16.7.13 to 16.8.22

    Bumps @types/react from 16.7.13 to 16.8.22.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    dependencies 
    opened by dependabot-preview[bot] 2
  • Build(deps-dev): Bump @types/react from 16.7.13 to 16.8.21

    Build(deps-dev): Bump @types/react from 16.7.13 to 16.8.21

    Bumps @types/react from 16.7.13 to 16.8.21.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    dependencies 
    opened by dependabot-preview[bot] 2
  • Build(deps-dev): Bump @types/react from 16.7.13 to 16.8.20

    Build(deps-dev): Bump @types/react from 16.7.13 to 16.8.20

    Bumps @types/react from 16.7.13 to 16.8.20.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    dependencies 
    opened by dependabot-preview[bot] 2
  • Build(deps-dev): Bump @storybook/addon-options from 4.0.11 to 5.1.8

    Build(deps-dev): Bump @storybook/addon-options from 4.0.11 to 5.1.8

    Bumps @storybook/addon-options from 4.0.11 to 5.1.8.

    Release notes

    Sourced from @storybook/addon-options's releases.

    v5.1.8

    Bug Fixes

    • CLI: Fix RN template to not import addons (#7096)

    v5.1.7

    Bug Fixes

    • UI: Fix warning of loading prop not being a string (#7080)

    v5.1.5

    Bug Fixes

    • Core: Upgrade plugin core-js fix (#7086)
    • UI: Fix sidebar loading visibility (#7073)
    • UI: Fix unnecessarily large bundlesize (#7091)
    • Addon-contexts, RN-server: Add core-js dep (#7094)

    v5.1.4

    Bug Fixes

    • Core: Fix core-js 3 errors (#7051)
    • UI: Fix syntax highlighter plain text not visible (#7057)
    • Addon-actions: Add default options to action(s) (#6438)

    Dependency Upgrades

    • RN: add missing core-js dependency (#7016)
    • chore: set react version to 16.8.3 to match react native (#7008)

    v5.1.3

    Bug Fixes

    • UI: Fix links that are not working with plain left click (#6970)
    • Core: Don't redefine process variable (#6991)
    • Core: Don't mutate user's babel config (#6987)

    v5.1.1

    Storybook 5.1 is a juicy upgrade including:

    • 📱 Mobile: Standalone package architecture for React Native
    • 🎟 A11y addon: Realtime accessibility checks and visual feedback
    • 🛠 Context addon: New UI for themes, internationalization, & more
    • 🎛 Presets: One-line configuration for babel, webpack, & addons

    5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 5.1.0-alpha.*, 5.1.0-beta.*, and 5.1.0-rc.* for the full list of changes. See MIGRATION.md to ugprade from 5.0 or earlier.

    v5.1.0-rc.5

    Features

    ... (truncated)
    Changelog

    Sourced from @storybook/addon-options's changelog.

    5.1.8 (June 14, 2019)

    Bug Fixes

    • CLI: Fix RN template to not import addons (#7096)

    5.1.7 (June 14, 2019)

    Bug Fixes

    • UI: Fix warning of loading prop not being a string (#7080)

    5.1.6 (June 14, 2019)

    Publish failed

    5.1.5 (June 14, 2019)

    Bug Fixes

    • Core: Upgrade plugin core-js fix (#7086)
    • UI: Fix sidebar loading visibility (#7073)
    • UI: Fix unnecessary large bundlesize (#7091)
    • Addon-contexts, RN-server: Add core-js dep (#7094)

    5.1.4 (June 13, 2019)

    Bug Fixes

    • Core: Fix core-js 3 errors (#7051)
    • UI: Fix syntax highlighter plain text not visible (#7057)
    • Addon-actions: Add default options to action(s) (#6438)

    Dependency Upgrades

    • fix: add missing core-js dependency (#7016)
    • chore: set react version to 16.8.3 to match react native (#7008)

    5.1.3 (June 6, 2019)

    Bug Fixes

    • UI: Fix links that are not working with plain left click (#6970)
    • Core: Don't redefine process variable (#6991)
    • Core: Don't mutate user's babel config (#6987)

    5.1.2 (June 6, 2019)

    Publish failed

    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    dependencies 
    opened by dependabot-preview[bot] 2
  • Build(deps-dev): Bump @storybook/addon-options from 4.0.11 to 5.1.4

    Build(deps-dev): Bump @storybook/addon-options from 4.0.11 to 5.1.4

    Bumps @storybook/addon-options from 4.0.11 to 5.1.4.

    Release notes

    Sourced from @storybook/addon-options's releases.

    v5.1.4

    Bug Fixes

    • Core: Fix core-js 3 errors (#7051)
    • UI: Fix syntax highlighter plain text not visible (#7057)
    • Addon-actions: Add default options to action(s) (#6438)

    Dependency Upgrades

    • RN: add missing core-js dependency (#7016)
    • chore: set react version to 16.8.3 to match react native (#7008)

    v5.1.3

    Bug Fixes

    • UI: Fix links that are not working with plain left click (#6970)
    • Core: Don't redefine process variable (#6991)
    • Core: Don't mutate user's babel config (#6987)

    v5.1.1

    Storybook 5.1 is a juicy upgrade including:

    • 📱 Mobile: Standalone package architecture for React Native
    • 🎟 A11y addon: Realtime accessibility checks and visual feedback
    • 🛠 Context addon: New UI for themes, internationalization, & more
    • 🎛 Presets: One-line configuration for babel, webpack, & addons

    5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 5.1.0-alpha.*, 5.1.0-beta.*, and 5.1.0-rc.* for the full list of changes. See MIGRATION.md to ugprade from 5.0 or earlier.

    v5.1.0-rc.5

    Features

    • UI: Add copy button for individual story (#6719)

    Bug Fixes

    • UI: Fix canvas rendering issue (#6968)
    • Angular: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 (#6957)
    • Jest: layout/design fixes (#6847)
    • Angular: Add 'addParameters' to index.d.ts (#6929)

    Maintenance

    • FIX race condition in startup of verdaccio && FIX typos (#6956)
    • Github org rename to storybookjs (#6954)

    v5.1.0-rc.4

    Features

    • Core: deep merge global options parameter (#6900)
    ... (truncated)
    Changelog

    Sourced from @storybook/addon-options's changelog.

    5.1.1 (June 5, 2019)

    Storybook 5.1 is a juicy upgrade including:

    • 📱 Mobile: Standalone package architecture for React Native
    • 🎟 A11y addon: Realtime accessibility checks and visual feedback
    • 🛠 Context addon: New UI for themes, internationalization, & more
    • 🎛 Presets: One-line configuration for babel, webpack, & addons

    5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 5.1.0-alpha.*, 5.1.0-beta.*, and 5.1.0-rc.* for the full list of changes. See MIGRATION.md to ugprade from 5.0 or earlier.

    5.1.0 (June 5, 2019)

    Publish failed

    5.1.0-rc.5 (June 4, 2019)

    Features

    • UI: Add copy button for individual story (#6719)

    Bug Fixes

    • UI: Fix canvas rendering issue (#6968)
    • Angular: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 (#6957)
    • Jest: layout/design fixes (#6847)
    • Angular: Add 'addParameters' to index.d.ts (#6929)

    Maintenance

    • FIX race condition in startup of verdaccio && FIX typos (#6956)
    • Github org rename to storybookjs (#6954)

    5.1.0-rc.4 (June 2, 2019)

    Features

    • Core: deep merge global options parameter (#6900)

    Bug Fixes

    • Core: Fix webpack process.* variable definitions (#6946)
    • Angular: Fix tsconfig.app.json detection for Angular 8 (#6940)

    5.1.0-rc.3 (May 29, 2019)

    Features

    • React-native: Add accessibility on searchbar (#6819)
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    dependencies 
    opened by dependabot-preview[bot] 2
  • Build(deps-dev): Bump @storybook/addon-options from 4.0.11 to 5.1.3

    Build(deps-dev): Bump @storybook/addon-options from 4.0.11 to 5.1.3

    Bumps @storybook/addon-options from 4.0.11 to 5.1.3.

    Release notes

    Sourced from @storybook/addon-options's releases.

    v5.1.3

    Bug Fixes

    • UI: Fix links that are not working with plain left click (#6970)
    • Core: Don't redefine process variable (#6991)
    • Core: Don't mutate user's babel config (#6987)

    v5.1.1

    Storybook 5.1 is a juicy upgrade including:

    • 📱 Mobile: Standalone package architecture for React Native
    • 🎟 A11y addon: Realtime accessibility checks and visual feedback
    • 🛠 Context addon: New UI for themes, internationalization, & more
    • 🎛 Presets: One-line configuration for babel, webpack, & addons

    5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 5.1.0-alpha.*, 5.1.0-beta.*, and 5.1.0-rc.* for the full list of changes. See MIGRATION.md to ugprade from 5.0 or earlier.

    v5.1.0-rc.5

    Features

    • UI: Add copy button for individual story (#6719)

    Bug Fixes

    • UI: Fix canvas rendering issue (#6968)
    • Angular: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 (#6957)
    • Jest: layout/design fixes (#6847)
    • Angular: Add 'addParameters' to index.d.ts (#6929)

    Maintenance

    • FIX race condition in startup of verdaccio && FIX typos (#6956)
    • Github org rename to storybookjs (#6954)

    v5.1.0-rc.4

    Features

    • Core: deep merge global options parameter (#6900)

    Bug Fixes

    • Core: Fix webpack process.* variable definitions (#6946)
    • Angular: Fix tsconfig.app.json detection for Angular 8 (#6940)

    v5.1.0-rc.3

    Features

    • React-native: Add accessibility on searchbar (#6819)

    Bug Fixes

    ... (truncated)
    Changelog

    Sourced from @storybook/addon-options's changelog.

    5.1.1 (June 5, 2019)

    Storybook 5.1 is a juicy upgrade including:

    • 📱 Mobile: Standalone package architecture for React Native
    • 🎟 A11y addon: Realtime accessibility checks and visual feedback
    • 🛠 Context addon: New UI for themes, internationalization, & more
    • 🎛 Presets: One-line configuration for babel, webpack, & addons

    5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 5.1.0-alpha.*, 5.1.0-beta.*, and 5.1.0-rc.* for the full list of changes. See MIGRATION.md to ugprade from 5.0 or earlier.

    5.1.0 (June 5, 2019)

    Publish failed

    5.1.0-rc.5 (June 4, 2019)

    Features

    • UI: Add copy button for individual story (#6719)

    Bug Fixes

    • UI: Fix canvas rendering issue (#6968)
    • Angular: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 (#6957)
    • Jest: layout/design fixes (#6847)
    • Angular: Add 'addParameters' to index.d.ts (#6929)

    Maintenance

    • FIX race condition in startup of verdaccio && FIX typos (#6956)
    • Github org rename to storybookjs (#6954)

    5.1.0-rc.4 (June 2, 2019)

    Features

    • Core: deep merge global options parameter (#6900)

    Bug Fixes

    • Core: Fix webpack process.* variable definitions (#6946)
    • Angular: Fix tsconfig.app.json detection for Angular 8 (#6940)

    5.1.0-rc.3 (May 29, 2019)

    Features

    • React-native: Add accessibility on searchbar (#6819)
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    dependencies 
    opened by dependabot-preview[bot] 2
  • Need a way of styling the createdAt date string

    Need a way of styling the createdAt date string

    I have a TimelineEvent which I'm using in a dark theme and so the default text colour for the createdAt date attribute is too dark against the dark theme background and doesn't show up very well!

    I would like to restyle the createdAt date however none of the existing style props appear to affect the createdAt styling! I've tried all the various styles e.g. style, titleStyle, subtitleStyle etc and none of them can be used to modify the createdAt date styling.

    The only way to override this it seems is to either just use my own css or perhaps render the createdAt attribute as a Dom node and attach my own custom styling to that, though I haven't tried that yet.

    Am I missing something? Is there an easy declarative way of setting the styling on createdAt?

    Thanks!

    opened by derek-groupmail 1
  • Time on left side, but content on right

    Time on left side, but content on right

    I'd like to have the time display on the left side of the line and the rest of the content on the right. It would be easier to read times going up and down. Is there an easy way to do this?

    opened by 8Keep 0
  • Crash when Timeline gets null as a child.

    Crash when Timeline gets null as a child.

    React.cloneElement(...): The argument must be a React element, but you passed null. The above error occurred in the component: in Timeline (created by TimelineComponent)

    https://github.com/rcdexta/react-event-timeline/blob/master/components/Timeline.js#L8 https://stackoverflow.com/questions/55327901/react-treats-timeline-element-as-null-even-with-a-condition-check/55328070#55328070

    opened by UjinT34 3
  • Alternate Card

    Alternate Card

    Hi,

    Thanks for this awesome library, we have a use case where we need alternating the card, is it possible in the TimelineEvent component to pass an orientation like Timeline?

    Ideally:

    image

    enhancement 
    opened by lan-nguyen91 0
  • Nice to have features

    Nice to have features

    Hello,

    I was going through this library and felt that these features would make it way more awesome:

    • Ability to Search Timeline Events with free text
    • Pagination/Infinite Scroll
    • Ability to separately define directions for each subtitle/title/event on either left or right of the timeline.
    • Expand/Collapse ( wrap long content) for a Timeline event #
    enhancement help wanted 
    opened by appsmehta 11
Releases(v1.6.3)
React-intersection-observer - Intersection observer With React

react-intersection-observer Package ?? Copy and Paste the Framer Package Usage F

null 4 Jul 10, 2022
React-compress - This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

React-compress - This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

Koma Human 26 Oct 28, 2022
React adblocker detect - Provides you with react hook to detect is an adblocker is enabled

React adblocker detect - Provides you with react hook to detect is an adblocker is enabled

Shubham Singh Chahar 3 Mar 15, 2022
A react or react native library to call functions comparing the last time that it was called

A react or react native library to call functions comparing the last time that it was called and running it when it's really needed. Avoiding unnecessary database calls or data loads that are updated at a certain time.

Hubert Ryan 6 Nov 9, 2022
React-native-dotenv - Load react native environment variables using import statements for multiple env files.

react-native-dotenv Load environment variables using import statements. Installation $ npm install react-native-dotenv Breaking changes: moving from v

Kemal Ahmed 543 Dec 6, 2022
👉 React Finger is a library of gesture events for React that allows developers to use a single set of events for both desktop and mobile devices.

?? React Finger is a library of gesture events for React that allows developers to use a single set of events for both desktop and mobile devices.

Houfeng 7 Nov 3, 2022
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 269 Nov 17, 2022
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Nov 28, 2022
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 323 Nov 15, 2022
A static site generator powered by Deno + React

A static site generator powered by Deno + React

xcatliu 1.5k Dec 7, 2022
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 159 Nov 2, 2022
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

Aleck Greenham 2k Dec 4, 2022
📦 noov.js for react ssr solution

?? noov.js for react ssr solution

art-design 17 Mar 30, 2022
📏 A resizable component for React.

?? A resizable component for React.

bokuweb 1.9k Nov 24, 2022
Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Components AI 59 Oct 9, 2022
A Fetch Library Support React New Suspense SSR

use-suspense-fetch A data fetching library for React Suspense. inspired by use-asset Feature use LRU Cache support create custom cache support React 1

Snake 10 Dec 4, 2022
@custom-elements-manifest/analyzer plugin to ✨ automatically ✨ create react wrappers for your custom elements

cem-plugin-reactify @custom-elements-manifest/analyzer plugin to automatically create React wrappers for your custom elements based on your custom ele

Pascal Schilp 9 Jul 29, 2022
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 37 Nov 10, 2022
Cookie cutter react portfolio suited perfectly for Github Pages

Cookie cutter react portfolio suited perfectly for Github Pages, get up and running in less then 5 minutes, just edit the data.json file and off you go!

null 44 Feb 23, 2022