@snowcoders/react-popper NPM

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!

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>
)