lusaxweb / Kursor

Cursor style with javascript and css
https://lusaxweb.github.io/Kursor/
MIT License
172 stars 97 forks source link

Does not work with React #7

Open kostberg opened 4 years ago

kostberg commented 4 years ago

Tried to implement this cursor in my react app but it wasn't compatible. Could this be fixed?

Frostbourn commented 4 years ago

+1 I can't make it work with Gatsby.

kostberg commented 4 years ago

Think this means we will have to fix this ourself :/

Frostbourn commented 4 years ago

Think this means we will have to fix this ourself :/

Just put the css files from cdn and everything should work.

kkkarannn commented 3 years ago

Any examples on how to get it working on React/Next.js

Frostbourn commented 3 years ago

To make kursor work with Gatsby just put the code below to gatsb-browser.js

import kursor from "kursor"

new kursor({
  type: 2,
  color: "#B98FFF",
  removeDefaultCursor: true,
})
FranciscoMendes10866 commented 3 years ago

Hi guys, I also had the same problem while using this dependency with Next.js.

Read this from the documentation to get a better understanding: https://bit.ly/3rMUWQL

"_document.jsx" code:

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }
  render() {
    return (
      <Html lang="en">
        <Head>
            <link rel="stylesheet" href="https://unpkg.com/kursor/dist/kursor.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
        <script src="https://unpkg.com/kursor" />
        <script dangerouslySetInnerHTML={{__html:`new kursor({ type: 1, removeDefaultCursor: true })`}} />
      </Html>
    )
  }
}

export default MyDocument

Hope this helps 😉

ksnirob commented 2 years ago

It's so easy to use like cutting a cake.

import

import Kursor from "kursor"; import 'kursor/dist/kursor.css'

you can change the type as you want.

new Kursor({ type: 2 })

Huzaifa-Ansari222 commented 10 months ago

my cursor only show on the hero section only not to all body by default it should be on body but not work