A lightweight and customizable React component for creating dynamic backgrounds with ease. This component allows you to cycle through images as the background of a container, with options for customization including the transition interval and additional CSS classes for styling.

• Easy to use and integrate into any React project.
• Supports cycling through multiple background images.
• Customizable image display interval.
• Allows additional CSS classes for further customization.
• Fully responsive and adaptable to various screen sizes.

To install the React Dynamic Background component, run the following command in your project directory:

npm install react-dynamic-background

To use react-dynamic-background, import it into your React component. Here's a basic example:

import React from 'react';
import './App.css';
import DynamicBackground from 'react-dynamic-background';
import "react-dynamic-background/dist/style.css";

const App = () => {
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    // Add more images as needed
  ];

  return (
    <DynamicBackground images={images} interval={3000}>
      <h1>Welcome to My Site</h1>
      {/* Additional content here */}
    </DynamicBackground>
  );
};

export default App;

To customize the background styles such as opacity, blur, or borders, you will need to add some CSS. Here's an example app.css file that includes styles for lower and higher opacity, a blur effect, and a border style:

/* App.css */
.opacity-low::before {
  opacity: 0.2; /* Lower opacity */
}

.opacity-high::before {
  opacity: 0.8; /* Higher opacity */
}

.blur-effect::before {
  filter: blur(8px); /* Apply blur */
}

.border-style::before {
  border: 5px solid #fff; /* Add border */
}

import React, { useState } from 'react';
import './css/App.css';
import DynamicBackground from 'react-dynamic-background';
import "react-dynamic-background/dist/style.css";

function App() {
  const [isHighOpacity, setIsHighOpacity] = useState(false);

  return (
    <div className='parent' onClick={() => setIsHighOpacity(!isHighOpacity)}>
      <DynamicBackground dynamicBgClasses={isHighOpacity ? 'opacity-high' : 'opacity-low'}>
        Click me to change opacity!
      </DynamicBackground>
    </div>
  );
}

export default App;

import React from 'react';
import './css/App.css';
import DynamicBackground from 'react-dynamic-background';
import "react-dynamic-background/dist/style.css";

const App = () => {
  return (
    <div className='parent'>
      <DynamicBackground dynamicBgClasses='blur-effect'>
        Your content here.
      </DynamicBackground>
    </div>
  );
};

export default App;

import React from 'react';
import './css/App.css';
import DynamicBackground from 'react-dynamic-background';
import "react-dynamic-background/dist/style.css";

const App = () => {
  return (
    <div className='parent'>
      <DynamicBackground dynamicBgClasses='border-style'>
        Your content here.
      </DynamicBackground>
    </div>
  );
};

export default App;

You can customize the appearance of the dynamic background by passing additional CSS classes through the dynamicBgClasses prop. Additionally, you can directly modify the CSS variables and classes defined in the component's stylesheet for more control over the styling.

See the demo: Demo URL

With react-dynamic-background, you can easily add and customize dynamic backgrounds in your React applications. Remember to import your CSS styles to apply effects like opacity changes, blur, or borders. Experiment with different styles and images to create unique and engaging user experiences.

Contributions are always welcome! If you'd like to contribute, please fork the repository and create a pull request with your changes, or open an issue to discuss what you'd like to change.

This project is licensed under the MIT License - see the LICENSE file for details.