Feature request: boundary padding

[rijk]

Parameter similar to https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.padding

[everweij]

I'm not 100% sure, but it looks a bit like placement.scrollOffset:

Determines the distance in pixels between the layer and the scroll-containers (incl. viewport)

Have you tried that yet? If so, do you know what the differences are regarding preventOverflow.padding?

[rijk]

Yep, missed that as well, sorry about that! 😴

Could I suggest a small change to the documentation of that property?

Determines the minimum margin in pixels between the layer and the scroll-containers (incl. viewport)

Maybe it would make sense to give this a default value as well? When it doesn’t have one it looks a bit weird:

Popper uses 5, but I think 10 looks even better. I think it would fit the react-laag philosophy of doing 80% of the work out of the box. What do you think?

[everweij]

Don't worry man! Yeah, that good make it easier to understand (adding 'minimum margin'). Maybe an example would also be a good idea (also for other props). It's on my todo list ;)

Sensible defaults +1, and I agree on the philosophy.

[rijk]

If you’re interested, I can send you my Tooltip implementation when it’s ready, and you can base an example off of that. :) It has a built-in switch for functions/components, so it can add the listeners (and ref) directly to the component, to prevent adding wrapper elements in the DOM (this is not always possible, depending on your CSS structure).

[everweij]

Yeah, that would be great! I'm interested to see what you've been working on, and could be helpful to others which are trying to accomplish something similar as well :). Let me know if you have something you can share.

[everweij]

I've adjusted the docs:

Determines the minimum margin in pixels between the layer and the scroll-containers (incl. viewport)

[rijk]

Here’s a copy of my Tooltip class with a couple of examples: https://codesandbox.io/s/react-laag-tooltip-implementation-ej9hs

Hope it’s useful :)

Oh by the way, couple notes:

• I didn’t use Framer Motion for the animation but regular CSS; big fan of motion as well but felt CSS transitions were a little smoother in this case (and I already had them from my previous implementation)
• You’ll notice I didn’t use useHover — I did at first but I found I didn’t like the built-in hide on scroll functionality. I couldn’t disable that and it made it unnecessarily heavy in my eyes. What could make that hook very interesting though, is if it would get a 'closing' state, where you can run your exit animation but it would still be repositioned by react-laag.
• You’ll also notice I re-export the anchors, I find them a little easier to use this way. (see the examples). The placement property still offers all the options, but usually I just want to set side (and offset). This is also influenced a little bit by my previous react-popper implementation.
• I added a hover prop as well to be able to control it externally (to prevent the error from react-laag)
• Finally, I added a render function that allows me to either pass in a normal element (like <input>), a custom component (like <Link>), or a function that will allow me to make fully custom behavior of when to toggle the tooltip.

If you have any questions, let me know!

[everweij]

Awesome example! Interesting to see how you're making react-laag fit into your own UI -> creating your own abstraction around it 👍🏼.

I didn’t use Framer Motion for the animation but regular CSS; big fan of motion as well but felt CSS transitions were a little smoother in this case (and I already had them from my previous implementation)

I agree, sometimes including an entire lib for transition styles is a bit overkill. Today I've released 1.4.0 and it includes a '' component, that is meant to be used with plain styles/css.

You’ll notice I didn’t use useHover — I did at first but I found I didn’t like the built-in hide on scroll functionality. I couldn’t disable that and it made it unnecessarily heavy in my eyes. What could make that hook very interesting though, is if it would get a 'closing' state, where you can run your exit animation but it would still be repositioned by react-laag.

I feel you on the 'built-in hide on scroll functionality'. I could make that an optional thing though. The problem with framer-motion (don't know about react-spring) for example is that it doesn't respond to prop changes when the layer is leaving. Therefore, layerProps.style has no effect when the layer is leaving. The new Transition component should work however.

Do you mind if I / you share this on Twitter for example? No offense if you don't want to ;) I'm looking for examples where the primitives of react-laag are used to create custom richer components, just like your tooltip ;)

[rijk]

Yeah no worries, thought you would find it cool to see how I'm using the library. If you have suggestions for improvement feel free to let me know, haha.

I agree, sometimes including an entire lib for transition styles is a bit overkill. Today I've released 1.4.0 and it includes a '' component, that is meant to be used with plain styles/css.

Well, I am using framer-motion already, so it wouldn’t add any weight. But just liked CSS better here. What kind of component did you mean? (Github seems to have stripped it out) -> Ah I see: <Arrow />.

I could make that an optional thing though.

Would be cool.

it doesn't respond to prop changes when the layer is leaving

What I actually meant was, first pass a closing state for x milliseconds (the amount you specified for delayLeave) and only then really removing the layer from DOM. This would remove the need for Transition/AnimatePresence altogether. So again could fit the 'doing 80% of the work' motto, and would make the useHover() hook a lot more interesting (although you might want to build this into the core component, so you could use it without useHover too). Hope that makes sense.

Do you mind if I / you share this on Twitter for example?

No problem :)