react-tag-sphere v1.0.3

react-tag-sphere

Make Animated rotating tag spheres with this library instantly. All credits to jjsanmartino03 for providing this example

Basic Example

import React from "react";
import { TagSphere } from "react-tag-sphere";

export default function App() {
  return <TagSphere />;
}

No Blur Example

This will disable blur effect on tags as it goes behind. In this example we also see how to change the styles on the font;

import React from "react";
import { TagSphere } from "react-tag-sphere";

export default function App() {
  return (
    <TagSphere
        style={{
          color: "green",
          fontWeight: "bold",
          fontSize: "1.2rem",
          fontFamily: "monospace",
        }}
        blur={false}
      />
   );
}

Using Images

const tags = [
  <img
      width={50}
      src={"https://cdn.svgporn.com/logos/react.svg"}
      alt={"Random image"}
    />,
    <img
      width={50}
      src={"https://cdn.svgporn.com/logos/javascript.svg"}
      alt={"Random image"}
    />,
 ]
 import React from "react";
import { TagSphere } from "react-tag-sphere";

export default function App() {
  return (
    <TagSphere
        tags={tags}
      />
   );
}

Properties