npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@transferwise/comparison-components

v31.5.6

Published

Display a comparison table of providers given a route and amount.

Downloads

607

Readme

Comparison Components

Owners

React components for Comparison.

  • Comparison Table: Shows a comparison table of providers given a route and amount without showing any inputs.
  • Comparison: Shows the comparison table with inputs provided for the route and amount.

The comparison components are currently used in multiple places including:

Usage

Web Widget / Universal Loader™

The easiest way to use Comparison Components within an application is by using the Web Widget / Universal Loader™. Please see the docs here for more details.

NPM module

Alternatively, you can install this React widget as an npm module running:

yarn add @transferwise/comparison-components

Development

Written using React and built using Webpack and rollup.

To see and develop with the components locally run yarn storybook.

The demo page contains the two different components Comparison and Table, one underneath the other.

We are currently using node 16 as a limitaion of working with webpack 4, so we use Volta to assist in setting Node version. but feel free to use another tool, or set the node version manually.

Example:

// example/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Comparison } from '../src/';

const Root = () => {
  return (
    <div>
      <Comparison
        sourceCurrency="EUR"  // required
        targetCurrency="GBP"  // required
        sendAmount={5000} // required
        source="EUR"  // deprecated
        target="GBP"  // deprecated
        amount={5000} // deprecated
        providers={['transferwise', 'deutsche-bank', 'commerzbank']}
        sourceCountry="de"
        providerCountry="de"
        maxVisibleProviders={5}
        expandDisclaimer
        affiliateLink="http://transferwise.evyy.net/c/111111/22222/333"
      />
    </div>
  );
};

ReactDOM.render(<Root />, document.getElementById('root'));
  • lang: string ISO 639-1. Default en
  • sourceCountry: string ISO 3166-1 alpha-2. Filter results by source country. i.e the origin country from where a user may want to send money from.
  • providerCountry: string ISO 3166-1 alpha-2. Filter by provider country. i.e the country which the provider belongs to (e.g Natwest - GB, ANZ - AU). This property is also useful for only showing national banks, rather than "global" providers (like Western Union, Moneygram etc)
  • maxVisibleProviders: number by default shows 3 providers and the rest are hidden under Show more providers link.
  • expandDisclaimer: boolean will render the table with the disclaimer already opened and scrolls the element into the visible area of the browser window
  • affiliateLink: string Affiliate tracking link.
  • trackEvent: func(eventName, trackingAttributes) is called on user interaction with the table and other table based events (for example, user changes the send amount or views at least 50% of the table).
  • trackLeavePageEvent: func(eventName, trackingAttributes, callback) is called on page exit events (for example, on click to CTA).

All attributes are valid for <Comparison /> <ComparisonTable /> components

Tasks

yarn storybook                    - runs storybook on 9001
yarn test                         - runs `jest` for Comparison Table
yarn run build-web                - compiles the standalone comparison widget
yarn run build-npm                - compiles UMD and ES bundles for distribution on NPM 

Do not forget to update the version number in package.json when committing changes.

Bundle analysis

The project has webpack-bundle-analyzer and rollup-plugin-visualizer set up to inspect the compiled bundle files. They can be accessed by setting the environment variable ANALYZE and running the build command as normal.

$ ANALYZE=true yarn build-web
# Note this will open several browser tabs, one for each bundle
$ ANALYZE=true yarn build-npm

Creating a new component

To create a new Comparison Component that can be imported by others, the following changes are required:

  • Create your component as the default export of ~/src/new-component
  • Create a .stories.js file in the folder to show the component in Storybook
  • ~/src/index.js: make the component a named export
  • Translations:
  • ~/rollup.config.js: add a new input
  • ~/webpack.config.npm.umd.js: add a new componentEntry()
  • ~/CODEOWNERS.md: make comparison team and your team owners of the ~/src/new-component folder
  • Follow the normal versioning process, outlined in the PR template

Translations

How translations working in comparison components

Contributing

  1. Make your changes.
  2. We automatically assign a reviewer to your PR but if it's urgent then post to comparison-dev-public channel for code review.
  3. you would need to update package.json , prod-current-version and CHANGELOG with new version and add an entry for the changes.

Releasing

  1. Get your PR approved we automatically assign a reviewer to your PR or ask for a review in comparison-dev-public.
  2. test the changes in storybook and validate chromatic changes.
  3. merge the PR, which would automatically publish both npm and widgets version.

Tracking

Read more about how tracking is working here.