kmjennison / react-sparkle Goto Github PK

npm i react-sparkle
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/react-sparkle
npm ERR!   react-sparkle@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

const About = () => {
  return (
    <>
        <div className="w-full px-10 text-neutral-600 pt-[50px]">
            <p className="text-[80px] leading-[5rem] helvetica mb-3">HELLO, THIS IS KLAW⁘. <br /> A JUNIOR PROGRAMMER & <br /> 
            <span className='relative'>
              <h2 className='mondwest italic text-[100px]'>dIgiTal ArTiSt </h2>
            </span>
            </p>
            <p className="text-[12px] leading-[1rem] helvetica">BASED IN BEKASI _ INDONESIA<br></br>WORKING WORLDWIDE</p>
            <div className='flex space-x-5 mt-20'>
              <div className="flex flex-col mb-10">
                  <a href="https://github.com/klawcodes" target="_blank" rel="noopener noreferrer">
                    <Image src="/img/klaw.png" width={300} height={300} alt='klaw' className='rounded-3xl'/>
                  </a>
                  <hr className='h-px mt-5 bg-gray-900 border-0 dark:bg-gray-900'/>
                  <p className='text-[12px] py-[0.9rem] helvetica'>FRONT END DEVELOPER - JUNIOR PROGRAMMER</p>
                  <h2 className='text-[19px] helvetica'>KLAW</h2>
              </div>
              <div className="flex flex-col">
                  <a href="https://github.com/klawcodasdasdes" target="_blank" rel="noopener noreferrer">
                    <Image src="/img/riot.png" width={300} height={300} alt='klaw' className='rounded-3xl'/>
                  </a>
                  <hr className='h-px mt-5 bg-gray-900 border-0 dark:bg-gray-900'/>
                  <p className='text-[12px] py-[0.9rem] helvetica'>3D DESIGNER - DIGITAL ARTIST</p>
                  <h2 className='text-[19px] helvetica'>RIOT REVENGER</h2>
              </div>
              <div className="flex flex-col">
                  <a href="https://github.com/klawcodasdasdes" target="_blank" rel="noopener noreferrer">
                    <Image src="/img/npk.png" width={300} height={300} alt='klaw' className='rounded-3xl'/>
                  </a>
                  <hr className='h-px mt-5 bg-gray-900 border-0 dark:bg-gray-900'/>
                  <p className='text-[12px] py-[0.9rem] helvetica'>GRAPHIC DESIGNER - DIGITAL ARTIST</p>
                  <h2 className='text-[19px] helvetica'>NEON PAPER KID</h2>
              </div>
              <div className="flex flex-col">
                  <a href="https://github.com/klawcodasdasdes" target="_blank" rel="noopener noreferrer">
                    <Image src="/img/mk.png" width={300} height={300} alt='klaw' className='rounded-3xl'/>
                  </a>
                  <hr className='h-px mt-5 bg-gray-900 border-0 dark:bg-gray-900'/>
                  <p className='text-[12px] py-[0.9rem] helvetica'>MUSIC PRODUCER</p>
                  <h2 className='text-[19px] helvetica'>MIDNIGHT KOALA</h2>
              </div>
            </div>
        </div>
    </>
  )
}

export default About

  "peerDependencies": {
    "react": ">=16.8.0 <18"
  }

npm ERR! Could not resolve dependency:
npm ERR! peer react@">=16.8.0 <18" from [email protected]
npm ERR! node_modules/react-sparkle
npm ERR!   react-sparkle@"^1.0.9" from the root project

declare module "react-sparkle" {
  import React from "react";

  export interface ReactSparkleProps {
    /**
     * The color of the sparkles. Can be a color, an array of colors,
     * or 'random' (which will randomly pick from all hex colors).
     */
    color?: string | string[];

    /** The number of sparkles to render. A large number could slow
     *  down the page. */
    count?: number;

    /** The minimum and maximum diameter of sparkles, in pixels. */
    minSize?: number;
    maxSize?: number;

    /** The number of pixels the sparkles should extend beyond the
     *  bounds of the parent element.
     */
    overflowPx?: number;

    /** How quickly sparkles disappear; in other words, how quickly
     *  new sparkles are created. Should be between 0 and 1000,
     *  with 0 never fading sparkles out and 1000 immediately
     *  removing sparkles. Most meaningful speeds are between
     *  0 and 150.
     */
    fadeOutSpeed?: number;

    /** Whether we should create an entirely new sparkle when one
     *  fades out. If false, we'll just reset the opacity, keeping
     *  all other attributes of the sparkle the same.
     */
    newSparkleOnFadeOut?: boolean;

    /** Whether sparkles should have a "flickering" effect. */
    flicker?: boolean;

    /** How quickly the "flickering" should happen.
     *  One of: 'slowest', 'slower', 'slow', 'normal', 'fast', 'faster', 'fastest'
     */
    flickerSpeed?:
      | "slowest"
      | "slower"
      | "slow"
      | "normal"
      | "fast"
      | "faster"
      | "fastest";
  }

  export default class ReactSparkle extends React.Component<ReactSparkleProps> {}
}