ReactWave

Setting Up Your Environment

If you haven’t already set up a React project, you can use Create React App:

bashCopy codenpx create-react-app react-wave
cd react-wave

Step 2: Create a Wave Component

We will create a component that renders a wave using SVG. Let’s create a new file called Wave.js in the src folder.

1. Create Wave.js

jsxCopy code// src/Wave.js
import React from 'react';

const Wave = ({ amplitude, frequency, speed }) => {
  const wavePath = (t) => {
    const y = amplitude * Math.sin(frequency * t);
    return `${t},${y + 100}`; // Adjust y offset to position the wave in the SVG
  };

  const points = Array.from({ length: 200 }, (_, i) => wavePath(i * speed)).join(' ');

  return (
    <svg width="100%" height="200" viewBox="0 0 200 200">
      <polyline
        points={points}
        fill="none"
        stroke="blue"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
};

export default Wave;

Step 3: Integrate Wave Component in App

Now, let’s use the Wave component in App.js and add some basic state management to animate it.

1. Update App.js

jsxCopy code// src/App.js
import React, { useState, useEffect } from 'react';
import Wave from './Wave';
import './App.css';

const App = () => {
  const [amplitude, setAmplitude] = useState(20);
  const [frequency, setFrequency] = useState(0.1);
  const [speed, setSpeed] = useState(0.2);
  const [offset, setOffset] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setOffset((prevOffset) => (prevOffset + speed) % 200);
    }, 100);
    return () => clearInterval(interval);
  }, [speed]);

  return (
    <div className="App">
      <h1>Wave Animation</h1>
      <Wave amplitude={amplitude} frequency={frequency} speed={offset} />
      <div className="controls">
        <label>
          Amplitude:
          <input
            type="number"
            value={amplitude}
            onChange={(e) => setAmplitude(e.target.value)}
          />
        </label>
        <label>
          Frequency:
          <input
            type="number"
            value={frequency}
            onChange={(e) => setFrequency(e.target.value)}
          />
        </label>
        <label>
          Speed:
          <input
            type="number"
            value={speed}
            onChange={(e) => setSpeed(e.target.value)}
          />
        </label>
      </div>
    </div>
  );
};

export default App;

Step 4: Add Basic Styles

Add some basic styles in App.css to make it look nicer:

cssCopy code/* src/App.css */
.App {
  text-align: center;
  padding: 20px;
}

.controls {
  margin-top: 20px;
}

.controls label {
  margin: 0 10px;
}

Step 5: Run Your Application

Start your application using:

bashCopy codenpm start

Summary

You now have a simple React application that features a wave animation! Users can control the amplitude, frequency, and speed of the wave through input fields. This serves as a basic introduction to creating animations with SVG in React.

Feel free to experiment with different values and enhance the app with more features, such as color customization or saving configurations!