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

react-fluent-mobile

v1.1.0

Published

A series of React mixin modules that augment the mobile user experience

Downloads

6

Readme

Banner

NPM Storybook Gitter Roadmap

Maintainability Quality Assurance

What's the problem with mobile browsers?

Mobile web browsers are an adaptation of the PC browsing experience for your mobile device. As a result, many features found on desktop browsers are sloppily implemented in ways that just aren't meant for phones, degrading your browsing experience.

Introducing fluency!

react-fluent-mobile allows you to take your mobile browser's native features and augment them, improving gloss and agility without compromising on ability.

Selecting text

Fluent takes selecting text on mobile to a whole new level by adding the selection manipulation pad. When text is selected by the user, whether selected through normal means, selected by the website, or tap-selected on Android, the selection manipulation pad appears. Users can touch and drag on the pad to shift the bounds of their selection in any direction they'd like, transforming their selection. Once the selection is fit to the user's liking, they can tap on the pad to instantly copy their selection to their clipboard.

  • One finger shifts the end bound
  • If a second finger is present, the first continues shifting the end while the second shifts the beginning, allowing manipulation of both bounds at the same time
  • Double-tapping on the pad copies the contents of the selection to the clipboard

NOTE: Copying to clipboard utilizes Clipboard API and therefore requires HTTPS. (document.execCommand() will also be attempted for HTTP)

  • Swiping down on the pad dismisses the pad and selection

Component Properties

Name|Description -|- collapseSwipeDistance|The minimum distance required to swipe down to dismiss the selection collapseSwipeDuration|The maximum duration of the swipe down to dismiss the selection nativeManipulationInactivityDuration|The interval the manipulation pad is inactive for when the selection is natively manipulated theme|The theme of the pad (dark, light)

Context menus

Context menus have been reimagined! Now, instead of holding and lifting your finger four times, holding down on a link or image will launch a cleaner context menu in which you can drag you finger to the desired option and lift your finger to select it. No more tapping!

If the new context menu is not desired, there is an option located at the bottom corner of the screen to disable it.

NOTE: Opening in new tab may trigger browser popup blockers NOTE: The share features are only available on HTTPS sites NOTE: Copying images to clipboard utilizes Clipboard API and therefore requires HTTPS.

Component Properties

Name|Description -|- theme|The theme of the pad (dark, light)

Media control

INSERT GIF

Coming soon

Installation and Quickstart

npm i react-fluent-mobile

import {
  FluentContextMixin,
  FluentSelectionMixin
} from 'react-fluent-mobile'

function Component (props) {
  return (
    <>
      <FluentContextMixin />
      <FluentSelectionMixin />

      <div ...>
        ...
      </div>
    </>
  )
}

Snappy, fluid, deliberate interactions

INSERT GIF


Known bugs

  • Tapping on the manipulation pad on Safari makes the selection invisible (this is an unavoidable quirk with Safari)

Developer notes

  • The share feature in the custom context menu doesn't work if the server is not HTTPS
  • Fluent Mobile works on all browsers and platforms
  • Safari does not allow haptics
  • The custom FlexibleRange class used for the selection system is exposed in the exports. Feel free to use it
  • Try to keep the mixins at the root of the heirarchy
  • You do not need to check for mobile devices before mounting the component. FM does that for you.