sphere-background-generator v1.0.3

Sphere-Background-Generator

A Simple tool to create beautiful sphere background each time refreshed.

Find Demo On:

• https://sphere-background-generator.web.app/

Installation in React.js

npm install sphere-background-generator

Using Background for the whole page

import React from "react";
import SpheresBackground from "sphere-background-generator";

function App() {
  return (
    <SpheresBackground
      animate={true}
      content={
        // All your content to be included with the background must go here
        <div style={{ height: "2000px" }}>Hello World!</div>
      }
    />
  );
}

export default App;

Using Background for a specific area

import React from "react";
import SpheresBackground from "sphere-background-generator";

function App() {
  return (
    <div>
      // This will not include the background
      <div style={{ height: "200px", backgroundColor: "#000", color: "#fff" }}>
        Background Will not Appear in here
      </div>
      <SphereBackground
        animate={true}
        content={
          // All your content to be included with the background must go here
          <div style={{ height: "2000px" }}>Hello World!</div>
        }
      />
    </div>
  );
}

export default App;

Accepted Props

animate

• true - If this prop set to true, a growing and shrinking animation will be applied to the spheres.
• false - If this prop set to false, only appearing animation will be applied to the spheres.

Note !

Using animate = {true} might be inconvenient for some users as it needs some processing power. Experience might be bugged.

content

• You Must add all your content that are needed to be wrapped with the background in here.

• The Code in the package is not compiled.
• If you get a warning like this, just ignore as Typescript is not provided.

Copyright Hiruka Chansilu 2022©