Set up the render props support

src/Flash.tsx

@@ -8,6 +8,29 @@ export enum FlashDirection {
   Up = 'up',
 }
 
+export interface RenderProps {
+  /**
+   * The className to be applied to the wrapper if needed.
+   */
+  wrapperClassName?: string;
+  /**
+   * The computed inline styles for the wrapper element.
+   */
+  style?: React.CSSProperties;
+  /**
+   * The className to be applied to the label if needed.
+   */
+  labelClassName?: string;
+  /**
+   * The value exposed to the renderProps.
+   */
+  value?: number;
+  /**
+   * The formatter function to format the value.
+   */
+  valueFormatter?: Formatter;
+}
+
 export interface Props {
   /**
    * Color value when the component flashes 'down'.
@@ -45,6 +68,8 @@ export interface Props {
    * Value to display. The only required prop.
    */
   value: number;
+
+  render?: (renderProps: RenderProps) => JSX.Element;
 }
 
 /**
@@ -70,6 +95,7 @@ export interface Props {
  * add your own unique styles.
  */
 export const Flash = ({
+  render,
   downColor = '#d43215',
   formatter,
   formatterFn,
@@ -120,6 +146,16 @@ export const Flash = ({
     };
   }, [value, timeout]);
 
+  if (render) {
+    return render({
+      wrapperClassName: cls,
+      style,
+      valueFormatter,
+      value,
+      labelClassName: `${stylePrefix}__value`,
+    });
+  }
+
   return (
     <div className={cls} style={style}>
       <span className={`${stylePrefix}__value`}>{valueFormatter(value)}</span>

stories/Flash.stories.tsx

@@ -225,3 +225,72 @@ export const MakeItNice = () => {
     </div>
   );
 };
+
+export const RenderProps = () => {
+  return (
+    <div className="make-it-nice">
+      <style
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: `
+          .make-it-nice .rvf_Flash {
+            border: 1px solid rgba(0, 0, 0, .1);
+            border-radius: 3px;
+            display: inline-flex;
+            margin: 50px;
+            width: 150px;
+            padding: 20px 40px 25px;
+            align-items: center;
+            justify-content: center;
+            font-family: -apple-system, BlinkMacSystemFont;
+            font-size: 42px;
+            font-weight: 200;
+            box-shadow: 0 11px 17px -8px rgba(0, 0, 0, 0.3);
+            transition-property: background-color, box-shadow, border-color !important;
+          }
+
+          .make-it-nice .rvf_Flash:hover {
+            box-shadow: 0 11px 14px -11px rgba(0, 0, 0, 0.3);
+          }
+
+          .make-it-nice .rvf_Flash:hover:not(.rvf_Flash--flashing) {
+            background-color: rgba(0, 0, 0, 0.03);
+          }
+
+          .make-it-nice .rvf_Flash__value {
+            transition: color .1s ease-in-out;
+          }
+
+          .make-it-nice .rvf_Flash--flashing-up {
+            border-color: #07b357;
+          }
+
+          .make-it-nice .rvf_Flash--flashing-down {
+            border-color: #912b19;
+          }
+
+          .make-it-nice .rvf_Flash--flashing .rvf_Flash__value {
+            color: #fff;
+          }
+        `,
+        }}
+      />
+
+      <ValueSetter initialValue={999}>
+        {(value: number) => (
+          <div className="example-wrapper">
+            <Flash 
+              value={value} 
+              formatter={"currency"}
+              render={props => (
+                <div className={props.wrapperClassName} style={props.style}>
+                  <span className={props.labelClassName}>{props.valueFormatter(props.value)}</span>
+                </div>
+              )} 
+            /> 
+          </div>
+        )}
+      </ValueSetter>
+    </div>
+  );
+}