Added ability to modify the components' dom structure

src/Flash.tsx

@@ -1,5 +1,8 @@
 import classnames from 'classnames';
 import React from 'react';
+import { Container } from './components/Container';
+import { Value } from './components/Value';
+import { ComponentsConfig } from './components/types';
 
 import { formatters, Formatter } from './formatters/index';
 
@@ -45,6 +48,10 @@ export interface Props {
    * Value to display. The only required prop.
    */
   value: number;
+  /**
+   * Components configs to do custom rendering
+   */
+  components?: ComponentsConfig;
 }
 
 /**
@@ -79,6 +86,10 @@ export const Flash = ({
   upColor = '#00d865',
   value,
   stylePrefix = 'rvf_Flash',
+  components = {
+    Container,
+    Value,
+  },
 }: Props) => {
   const ref = React.useRef<number>(value);
   const [flash, setFlash] = React.useState<FlashDirection | null>(null);
@@ -121,8 +132,8 @@ export const Flash = ({
   }, [value, timeout]);
 
   return (
-    <div className={cls} style={style}>
-      <span className={`${stylePrefix}__value`}>{valueFormatter(value)}</span>
-    </div>
+    <components.Container cls={cls} style={style}>
+      <components.Value value={value} valueFormatter={valueFormatter} stylePrefix={stylePrefix} />
+    </components.Container>
   );
 };

src/components/Container.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+
+export interface CommonProps {
+  /**
+   * classnames to be used with the Container component
+   */
+  cls: string;
+
+  /**
+   * Custom styles to be used for the Container component
+   */
+  style: React.CSSProperties;
+}
+
+export interface ContainerProps extends CommonProps {
+  children: ReactNode;
+}
+
+export const Container = ({ children, cls, style }: ContainerProps) => {
+  return (
+    <div className={cls} style={style}>
+      {children}
+    </div>
+  );
+};

src/components/Value.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Formatter } from '../formatters/index';
+
+export interface CommonProps {
+  /**
+   * Pass your own formatter function.
+   */
+  valueFormatter: Formatter;
+  /**
+   * Prefix for the CSS selectors in the DOM.
+   */
+  stylePrefix: string;
+  /**
+   * Value to display..
+   */
+  value: number;
+}
+
+export interface ValueProps extends CommonProps {}
+
+export const Value = ({ valueFormatter, stylePrefix = 'rvf_Flash', value }: ValueProps) => {
+  return <span className={`${stylePrefix}__value`}>{valueFormatter(value)}</span>;
+};

src/components/types.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { ContainerProps } from './Container';
+import { ValueProps } from './Value';
+
+export interface ComponentsConfig {
+  Container: ComponentType<ContainerProps>;
+  Value: ComponentType<ValueProps>;
+}

stories/Flash.stories.tsx

@@ -6,6 +6,8 @@ import { Flash, Props } from '../src/Flash';
 import { useInterval } from './useInterval';
 import { ValueSetter } from './components/ValueSetter';
 import pkg from '../package.json';
+import { CustomContainer } from './components/CustomContainer';
+import { CustomValue } from './components/CustomValue';
 
 export default {
   title: 'Flash',
@@ -225,3 +227,20 @@ export const MakeItNice = () => {
     </div>
   );
 };
+
+export const CustomComponent = () => {
+  return (
+    <ValueSetter initialValue={999}>
+      {(value: number) => (
+        <Flash
+          value={value}
+          formatter="currency"
+          components={{
+            Container: CustomContainer,
+            Value: CustomValue,
+          }}
+        />
+      )}
+    </ValueSetter>
+  );
+};

stories/components/CustomContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ContainerProps } from '../../src/components/Container';
+
+export const CustomContainer = ({ children, cls, style }: ContainerProps) => {
+  const customStyles: React.CSSProperties = {
+    border: '1px solid rgba(0, 0, 0, .1)',
+    borderRadius: '3px',
+    display: 'inline-flex',
+    margin: 50,
+    width: 150,
+    padding: '20px 40px 25px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: '-apple-system, BlinkMacSystemFont',
+    fontSize: 42,
+    fontWeight: 200,
+    boxShadow: '0 11px 17px -8px rgba(0, 0, 0, 0.3)',
+    transitionProperty: 'background-color, box-shadow, border-color !important',
+  };
+
+  return (
+    <div className={cls} style={{ ...style, ...customStyles }}>
+      {children}
+    </div>
+  );
+};

stories/components/CustomValue.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ValueProps } from '../../src/components/Value';
+
+export const CustomValue = ({ stylePrefix, valueFormatter, value }: ValueProps) => {
+  return (
+    <span className={`${stylePrefix}__value`}>
+      {valueFormatter(value)}
+    </span>
+  );
+};