Add style prop to LiveAudioVisualizer component

README.md

@@ -96,6 +96,7 @@ const Visualizer = () => {
 | **`maxDecibels`** |  A double, representing the maximum decibel value for scaling the FFT analysis data. For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/maxDecibels) | `-10` | Yes |
 | **`minDecibels`** |  A double, representing the minimum decibel value for scaling the FFT analysis data, where 0 dB is the loudest possible sound. For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/minDecibels) | `-90` | Yes |
 | **`smoothingTimeConstant`** |  A double within the range 0 to 1 (0 meaning no time averaging). For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/smoothingTimeConstant) | `0.4` | Yes |
+| **`style`** |  Custom styles that can be passed to the visualization canvas | N/A | Yes |
 
 
 

src/AudioVisualizer/AudioVisualizer.tsx

@@ -50,7 +50,7 @@ interface Props {
    */
   currentTime?: number;
   /**
-   * Custome styles that can be passed to the visualization canvas
+   * Custom styles that can be passed to the visualization canvas
    */
   style?: React.CSSProperties;
   /**

src/LiveAudioVisualizer/LiveAudioVisualizer.tsx

@@ -74,6 +74,10 @@ export interface Props {
    * Default: `0.4`
    */
   smoothingTimeConstant?: number;
+  /**
+   * Custom styles that can be passed to the visualization canvas
+   */
+  style?: React.CSSProperties;
 }
 
 const LiveAudioVisualizer: (props: Props) => ReactElement = ({
@@ -88,6 +92,7 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({
   maxDecibels = -10,
   minDecibels = -90,
   smoothingTimeConstant = 0.4,
+  style,
 }: Props) => {
   const [context, setContext] = useState<AudioContext>();
   const [audioSource, setAudioSource] = useState<MediaStreamAudioSourceNode>();
@@ -177,6 +182,7 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({
       height={height}
       style={{
         aspectRatio: "unset",
+        ...style,
       }}
     />
   );