Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: include support for Nextjs #10

Closed
kinxlo opened this issue Nov 6, 2022 · 1 comment
Closed

feat: include support for Nextjs #10

kinxlo opened this issue Nov 6, 2022 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@kinxlo
Copy link

kinxlo commented Nov 6, 2022

cannot use import statement outside module

Screenshot 2022-11-06 101002

@tochibedford tochibedford self-assigned this Nov 6, 2022
@tochibedford tochibedford added the bug Something isn't working label Nov 6, 2022
@tochibedford tochibedford added the help wanted Extra attention is needed label Dec 13, 2022
@tochibedford
Copy link
Owner

I have patched this in v0.1.12 and The solution to this ended up being somewhat trivial.
Now all you have to do is use the "import" from nextjs
like so

const customCurses = async () => await import('custom-curses')

now since it's asynchronous you can call it inside a useEffect

useEffect(() => {
    customCurses().then(library => {
      const { Cursor, Pointer, initializeCanvas } = library
      // let objects: TCharacter[] = []; //for typescript users

      const pointer1 = new Pointer(
        {
          pointerShape: ["string", "👆"],
          size: 50,
          drag: 0.1,
          xCharOffset: 9,
          yCharOffset: 40,
          rotation: -40,
          xOffset: 0,
          yOffset: 0,
        },
        objects
      );

      const pointer2 = new Pointer(
        {
          pointerShape: ["string", "🙂"],
          size: 20,
          drag: 0.5,
          xOffset: 50,
          yOffset: 50,
        },
        objects
      );

      const pointer3 = new Pointer(
        {
          pointerShape: ["string", "😲"],
          size: 20,
          drag: 0.7,
          xOffset: 70,
          yOffset: 70,
        },
        objects
      );

      const pointer4 = new Pointer(
        {
          pointerShape: ["string", "😶"],
          size: 20,
          drag: 0.8,
          xOffset: 90,
          yOffset: 90,
        },
        objects
      );

      const pointer5 = new Pointer(
        {
          pointerShape: ["string", "😣"],
          size: 20,
          drag: 0.89,
          xOffset: 110,
          yOffset: 110,
        },
        objects
      );

      const cursor1 = new Cursor({
        pointers: [pointer1, pointer2, pointer3, pointer4, pointer5],
        drag: 0, //where 1 is max
        hideMouse: true,
      });

      let canvasLol = initializeCanvas(cursor1, objects);
    })
  }, [])

the result of which is:
image

In later versions this will be added as an example in the 'examples' folder
I am also thinking of building specific support for React/Next js into the library, or just making a wrapper library for that

@tochibedford tochibedford removed the help wanted Extra attention is needed label Jan 3, 2023
@tochibedford tochibedford pinned this issue Feb 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants