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

@terebentina/react-responsive-link

v1.1.0

Published

A ReactJS link component that responds to touch without delay (and more native-like behaviour)

Downloads

8

Readme

react-responsive-link

A link component that:

  • doesn't have the 300ms tap delay on mobile (even if the zoom is not fixed).
  • if you need to scroll the page and happen to grab a link when you start swiping, the action of the link will not be triggered (just as it is expected on mobile).
  • it is not either tap or click. That is, you can use it on a hibrid device that has both touch and mouse and it'll react appropriately to clicks and taps.

This is similar to what Fastclick does, implemented as a React component. Note that on browsers that did remove the click delay this responsive link is going to be slightly slower than the native link because of the extra code involved. Way faster than 300ms though!

Hopefully soon no browser will need this trick.

Installation

npm i @terebentina/react-responsive-link -S

Usage

var Link = require('@terebentina/react-responsive-link');

<Link onClickTap={this.doSomething}>click or tap me</Link>

The more complete example below is using ES6 and the class syntax but, obviously, you can use ES5 and regular React.createClass() as well.

import React from 'react';
import Link from '@terebentina/react-responsive-link';

class MyComponent extends React.Component {
  doSomething(e) {
    e.preventDefault();
    console.log('you clicked or tapped me!');
  }

  render() {
    return (
      <div>
        This is some text
        <Link onClickTap={this.doSomething}>click or tap me</Link>
      </div>
    );
  }
}

Properties

You can pass any prop to the link but the following props are "special":

  • onClickTap the function to execute when the link is clicked or tapped. The function is passed the event as the first parameter.
  • href can be used instead of onClickTap if you need to specify an url to go to. Note that href is not very friendly with react-router! See the example below if you want to use this together with react-router

Usage with react-router

You need to follow the Navigating Outside of Components guide from react-router. Once you create that history.js module you can make use of it for your responsive links:

import React from 'react';
import Link from '@terebentina/react-responsive-link';
import history from './history';

class MyComponent extends React.Component {
  goToLink(e) {
    e.preventDefault();
    history.replaceState(null, '/some/path');
  }

  render() {
    return (
      <div>
        Click the link to
        <Link onClickTap={this.goToLink}>navigate with react-router</Link>
      </div>
    );
  }
}

License

The MIT License

Copyright (c) 2016 Dan Caragea