Spread modifier styles inside _getPopperStyle and update example

floating-ui · Mar 9, 2017 · 943b525 · 943b525
1 parent be18bdc
commit 943b525
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/example/index.jsx b/example/index.jsx
@@ -42,6 +42,21 @@ class App extends Component {
             Content Right
             <Arrow/>
           </Popper>
+          <Popper placement="top" modifiers={ {
+                          customStyle: {
+                            enabled: true,
+                            'function': function(data) {
+                              data.styles = {
+                                ...data.styles,
+                                background: 'red',
+                              };
+                              return data
+                            }.bind(this)
+                          },
+                        } }>
+            Custom Style
+            <Arrow/>
+          </Popper>
           <Popper placement={placement}>
             Dynamic Content
             <Arrow/>

diff --git a/example/main.scss b/example/main.scss
@@ -10,6 +10,10 @@ html {
   font-family: 'Lato', sans-serif;
 }
 
+select {
+  margin-bottom: 3rem;
+}
+
 .popper {
   background: #222;
   color: white;

diff --git a/src/Popper.jsx b/src/Popper.jsx
@@ -139,8 +139,10 @@ class Popper extends Component {
       left,
       position,
     } = this.state.data.offsets.popper
+    const styles = this.state.data.styles
 
     return {
+      ...styles,
       position,
       top:        0,
       left:       0,