Open FezVrasta opened 4 years ago
I just found out about this issue, and I’ve actually just published a package that uses two actions to attach Popper!
https://github.com/bryanmylee/svelte-popperjs
The idea is to wrap both actions in an object such that there is some shared state, then attach Popper there.
For my package, I have a createPopperActions
function which returns two functions – refAction
and popperAction
, that are used on the reference and popper element.
popperAction
takes the popper options config object, and while it doesn’t emit any event to update styles or attributes yet, that is definitely a possibility.
Perhaps that could be of some help!
<script>
import { createPopperActions } from ‘svelte-popperjs’;
const [ popperRef, popperContent ] = createPopperActions();
</script>
<button use:popperRef>
Reference Element
</button>
<div use:popperContent={{ placement: ‘right’ }}>
Popper Element
</div>
Here’s an example of how my package is used.
The existing
<Popper />
component doesn't feel right, it does absolutely nothing, if not allow the consumers to pass props down and retrieve the result.The README example could be written as follows and everything would still work:
A cleaner approach could be the
use:action
API.Here's a basic example: https://codesandbox.io/s/trusting-butterfly-704gd?file=/popperAction.js
Thoughts?