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

fabbar

v1.0.2

Published

A FAB button in React with Speed dial, Toolbar or Menu

Downloads

3

Readme

FABBar

This is a React implementation of a Floating Action Button, as described by the Material Design guidelines.

The following features are implemented:

  • Toolbar: Opens from the bottom right.
  • Menu: Opens from the bottom right.
  • Speed dial: New buttons flow out from FAB in one of four directions.

All animations are done with CSS. There are currently no touch ripples when interacting with button.

Usage

ReactDOM.render(
  <FABBar
      className="upperRight"
      alwaysOpen={false}
      direction="down"
      actions={actions}
      closeOnScroll={true}
      openOnHover={false}
      isModal={false}
      primaryAction={false}
  />,
  document.getElementById('fabbutton')
)

Options

  • actions The actions and icons used for the different buttons. An array of JS-objects, which consists of: ⋅⋅+ action: A js function that runs when clicking on button. ⋅⋅+ url: The button behaves just like a link. ⋅⋅+ label: Used as a label for menu. Should also be used as tooltip (not implemented) ⋅⋅+ icon: A Material Icons icon, used for the button.
  • className is just used as-is in the class attribute.
  • alwaysOpen The FAB Bar starts as open, and can not be closed. Should only be used with Speed Dial, but you should consider avoiding this usage either way.
  • direction Speed dial specific: which direction the smaller buttons should flow.
  • closeOnScroll Closes the widget when users scroll. Handy for toolbar on mobile.
  • openOnHover Open the widgets on hower. Just like the speed dial on Google Inbox.
  • isModal Places an overlay over the screen when FABBar is open.
  • primaryAction When true, the FAB button itself becomes an action when FABBar is open.

Installation

npm install fabbar

You can either use the compiled distributed files from dist or the raw source-code from src, depending on your needs.

In src you will find React jsx components, where FABBar is the one you would want to import into your project. You also find scss code for buttons, menu and toolbar. If you don't intend to use toolbar or menu, you can simply skip importing these files from your scss code.

What would be the simplest way for you to use/import this package? Let us know! :-)

In dist you will find transpiled javascript and css. These can be sent as-is directly to the browser. The javascript-file can also be used as an AMD or CommonJS module.

Behavior

This is a React 16.2.0 component. It relies on React portals to make sure your FAB will display "correctly" even if you don't run it from a React application.

This means that no matter where you place the button, it will be appended as a direct child of body. Thus it will placed above everything else on the screen (with a fixed position).

All animations are done with CSS and class toggling from js. We hope this will give a nice performance even on slower devices.