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!