feat: add viewStyle and innerViewWrapperStyle props

README.md

@@ -107,3 +107,13 @@ Any extra class names to add to the root element.
 ##### `style: Object`
 
 Extra inline styles to add to the root element.
+
+##### `viewStyle: Object`
+
+Extra inline styles to add to the view wrapper elements.
+
+##### `innerViewWrapperStyle: Object`
+
+Extra inline styles to add to the inner div between the `viewStyle` div and your
+view content element. (The inner div was added to ensure perfect height
+animation.)

src/index.js

@@ -33,6 +33,8 @@ export type Props = {
   sizeTransitionTimingFunction: string,
   prefixer: Prefixer,
   style: Object,
+  viewStyle?: ?Object,
+  innerViewWrapperStyle?: ?Object,
   className?: string,
 }
 
@@ -73,10 +75,16 @@ export default class Fader extends React.Component<Props, State> {
     children: any,
     transitionState: TransitionState
   ): React.Element<'div'> => {
-    const { animateWidth, prefixer } = this.props
+    const {
+      animateWidth,
+      prefixer,
+      viewStyle,
+      innerViewWrapperStyle,
+    } = this.props
     const style: Object = {
       display: animateWidth ? 'inline-flex' : 'flex',
       transitionProperty: 'opacity',
+      ...viewStyle,
     }
     switch (transitionState) {
       case 'out':
@@ -98,7 +106,10 @@ export default class Fader extends React.Component<Props, State> {
         data-transition-state={transitionState}
         style={prefixer.prefix(style)}
       >
-        <div style={{ width: '100%' }} ref={c => (this.wrappedChildrenRef = c)}>
+        <div
+          style={prefixer.prefix({ width: '100%', ...innerViewWrapperStyle })}
+          ref={c => (this.wrappedChildrenRef = c)}
+        >
           <TransitionContext state={transitionState}>
             {children}
           </TransitionContext>