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 🙏

© 2019 – Ryan Hefner

react-floater

v0.6.5

Published

Floaters everywhere!

Downloads

174,268

Readme

React Floater

NPM version build status Maintainability Test Coverage

View the demo

You can view and edit the code for each Floater here

Usage

Install.

npm install --save react-floater

Import it into your component:

import Floater from 'react-floater';

<Floater content="This is the Floater content">
    <span>click me</span>
</Floater>

And voíla!

Customization

You can use your own components to render the Floater with the prop component.
Check WithStyledComponents.js in the demo for an example.

If you use your own components as children it will receive an innerRef prop that you must set in your HTMLElement:
Stateless components don't accept refs...

const Button = ({ innerRef, ...rest }) => (
  <button ref={innerRef} {...rest} />
);

...
<Floater content="This is the Floater content">
    <Button>click me</Button>
</Floater>

This works transparently with styled-components (and possible other modules):

const Wrapper = styled.div`
  margin: 0 auto;
  max-width: 500px;
  line-height: 1.5;
`;

<Floater content="This is the Floater content">
    <Wrapper>click me</Wrapper>
</Floater>

Props

autoOpen {bool} ▶︎ false
Open the Floater automatically.

callback {func}
It will be called when the Floater change state with 2 parameters:

  • action {string} open or close
  • props {object} the props you passed.

children {node}
An element to trigger the Floater.

component {element|function}
A React component or function to as a custom UI for the Floater.
The prop closeFloater will be available in your component.

content {node}
The Floater content. It can be anything that can be rendered.
This is the only required props, unless you pass a component.

debug {bool} ▶︎ false
Log some basic actions.
You can also set a global variable ReactFloaterDebug = true;

disableAnimation {bool} ▶︎ false
Animate the Floater on scroll/resize.

disableFlip {bool} ▶︎ false
Disable changes in the Floater position on scroll/resize.

disableHoverToClick {bool} ▶︎ false
Don't convert hover event to click on mobile.

event {string} ▶︎ click
The event that will trigger the Floater. It can be hover | click.
These won't work in controlled mode.

eventDelay {number} ▶︎ 0.4
The amount of time (in seconds) that the floater should wait after a mouseLeave event before hiding.
Only valid for event type hover.

footer {node}
It can be anything that can be rendered.

getPopper {function} Get the pooper.js instance. It receives with 2 parameters:

  • popper {object} the popper object
  • origin {object} floater or wrapper

hideArrow {bool} ▶︎ false
Don't show the arrow. Useful for centered or modal layout.

id {string|number}
In case that you need to identify the portal.

offset {number} ▶︎ 15
The distance between the Floater and its target in pixels.

open {bool} ▶︎ false
The switch between normal and controlled modes.
Setting this prop will disabled the normal behavior.

options {object}
Customize popper.js modifiers.
Don't use it unless you know what you're doing

placement {string} ▶︎ bottom
The placement of the Floater. It will update the position if there's no space available.

It can be:

  • top (top-start, top-end)
  • bottom (bottom-start, bottom-end)
  • left (left-start, left-end)
  • right (right-start, right-end
  • auto
  • center

showCloseButton {bool} ▶︎ false
It will show a ⨉ button to close the Floater.
This will be true when you change wrapperOptions position.

styles {object} ▶︎ defaultStyles
Customize the default UI.

target {object|string}
The target used to calculate the Floater position. If it's not set, it will use the children as the target.

title {node}
It can be anything that can be rendered.

wrapperOptions {object}
Position the wrapper relative to the target.
You need to set a target for this to work.

{
    offset: number, // The distance between the wrapper and the target. It can be negative.
    placement: string, // the same options as above, except center
    position: bool, // Set to true to position the wrapper
}

Styling

You can customize everything with the styles prop.
Only set the properties you want to change and the default styles will be merged.

Check it styles.js for the syntax.

Modes

Default
The wrapper will trigger the events and use itself as the Floater's target.

<Floater content="This is the Floater content">
    <span>click me</span>
</Floater>

Proxy
The wrapper will trigger the events but the Floater will use the target prop to position itself.

<div className="App">
    <img src="some-path" />

    <Floater
      content="This is the Floater content"
      target=".App img"
    >
        <span>click me</span>
    </Floater>
</div>

Beacon
The same as the proxy mode but the wrapper will be positioned relative to the target.

<div className="App">
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Google-favicon-2015.png" width="100" className="my-super-image" />

    <Floater
        content="This is the Floater content"
        target=".my-super-image"
        wrapperOptions={{
            offset: -22,
            placement: 'top',
            position: true,
        }}
    >
    <span style={{ color: '#f04', fontSize: 34 }}>◉</span>
    </Floater>
</div>

Controlled
When you set a boolean to the open prop it will enter the controlled mode and it will not respond to events.
In this mode you don't even need to have children

<div className="App">
    <img src="some-path" />
    <Floater
        content="This is the Floater content"
        open={true}
        target=".App img"
    />
</div>