Spread modifier styles inside _getPopperStyle and update example #6
Conversation
brentertz
force-pushed
the
spread-modifiers-styles
branch
from
943b525
to
9429995
Compare
src/Popper.jsx
Outdated
|
|
||
| return { | ||
| position, | ||
| top: 0, | ||
| left: 0, | ||
| transform: `translate3d(${left}px, ${top}px, 0px)`, | ||
| willChange: 'transform', | ||
| ...styles, |
There was a problem hiding this comment.
FWIW, this is similar to how PopperJS handles things inside of its own applyStyle modifier.
https://github.com/FezVrasta/popper.js/blob/master/src/popper/modifiers/applyStyle.js#L53
There was a problem hiding this comment.
You don't need any of the above definitions if you are going to use the styles provided by Popper.js, the code here can be simplified.
There was a problem hiding this comment.
@FezVrasta so are you saying the transform values and such do not need to be added since styles is used now?
There was a problem hiding this comment.
If I'm not missing anything, yup
|
I'd like to keep things natural to React where possible. Your use case sounds like it should be solved by just passing a |
|
The advantage of this change is that someone can use custom modifiers of Popper.js with this component. Otherwise one can only add custom modifiers that leverage on |
|
Sorry, I did some updates. Can you rebase master please? |
What does this PR do?
Spreads modifier styles inside _getPopperStyle and updates example.
Any background context you want to provide?
We ran into this need when working with a react custom Select component where we want the dropdown list width to match that of the trigger.
The example includes a simpler scenario where we just change the background color.
Screenshot