https://github.com/lxsmnsyc/solid-popper

SolidJS bindings for Popper.js
https://github.com/lxsmnsyc/solid-popper

Last synced: 5 months ago
JSON representation

SolidJS bindings for Popper.js

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-popper
• Owner: lxsmnsyc
• License: mit
• Created: 2021-09-09T14:36:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-12T12:23:53.000Z (11 months ago)
• Last Synced: 2024-12-09T07:42:43.652Z (5 months ago)
• Language: TypeScript
• Size: 391 KB
• Stars: 36
• Watchers: 3
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Popper

README

        
# solid-popper

> SolidJS bindings for Popper.js

[![NPM](https://img.shields.io/npm/v/solid-popper.svg)](https://www.npmjs.com/package/solid-popper) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-popper/tree/main/examples/solid-popper-demo)

## Install

```bash

yarn add @popperjs/core solid-popper

```

## Usage

```jsx

import { createSignal } from 'solid-js';

import usePopper from 'solid-popper';

function Component() {

  const [anchor, setAnchor] = createSignal();

  const [popper, setPopper] = createSignal();

  usePopper(anchor, popper, {

    placement: 'auto',

  });

  return (

    <>

      Example

      
This is a tooltip.

    >

  );

}

```


## Sponsors

![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)