@snowcoders/react-popper

Deprecated - React wrapper around PopperJS.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
10Jul 11, 2018Jan 26, 2018Minified + gzip package size for @snowcoders/react-popper in KB

Readme

Deprecation Notice

The official version of react-popper has reached 1.0.0 and this library is now deprecated and will not receive new updates. Please contribute to and use https://github.com/FezVrasta/react-popper instead!

npm (scoped) CircleCI branch

React Popper - Typescript

React wrapper around PopperJS Fork of React-Popper and now has the following additional functionality

  • More type-safe than before
  • Allows you to use whatever version of popper.js you want to use
  • Written in typescript so your *.d.ts will be correct
  • Able to install directly from github (though not suggested)
  • Developing is easier
  • Test coverage coming soon!

Install

npm install @snowcoders/react-popper --save npm install popper.js[@version-of-choice] --save

<script src="https://unpkg.com/@snowcoders/react-popper/dist/index.js"></script>
(UMD library exposed as `ReactPopper`)

Usage

See our example for more details

import { Manager, Target, Popper, Arrow } from '@snowcoders/react-popper'

const PopperExample = () => (
    <Manager>
        <div>
            <span>I am text before the</span>{" "}
            <Target
                componentFactory={(targetProps) => (
                    <span {...targetProps}>
                        Target Box
                    </span>
                )}
            />
            <Popper
                placement="right"
                componentFactory={(popperProps) => (
                    <span {...popperProps}>
                        I am the tooltip
                        <Arrow
                            componentFactory={(arrowProps) => (
                                <span {...arrowProps} />
                            )}
                        />
                    </span>
                )}
            />{" "}
            <span>for the popover</span>
        </div>
    </Manager>
)

Running Locally

  1. git clone https://github.com/snowcoders/react-popper
  2. cd react-popper
  3. npm install
  4. npm run start

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.