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

Request for More Detailed Code Examples in Documentation #171

Open
EmreDemirkapi opened this issue Nov 6, 2024 · 2 comments
Open

Request for More Detailed Code Examples in Documentation #171

EmreDemirkapi opened this issue Nov 6, 2024 · 2 comments

Comments

@EmreDemirkapi
Copy link

I would like to express my appreciation for the excellent work on this library. It has been extremely useful and well-structured for my projects.

To further enhance the utility of the documentation, I believe it would be beneficial to include more detailed code examples for complex use cases. Specifically, one area where I encountered a gap was in toggling the movability of draggable elements. Having an example for this scenario would significantly aid developers in using this feature effectively.

Proposed Addition:

Below is an example that demonstrates how to enable and disable the drag functionality of an element using the Draggable class. This particular example was something I felt was missing from the current documentation:

import React, { useEffect, useRef, useState } from 'react';
import { Draggable } from '@neodrag/vanilla';

function App() {
  const dragRef = useRef(null);
  const [isDisabled, setIsDisabled] = useState(false);
  const dragInstance = useRef(null);

   // Initialize Draggable instance on mount
  useEffect(() => {
    if (dragRef.current && !dragInstance.current) {
      dragInstance.current = new Draggable(dragRef.current, {
        onDrag: ({ offsetX, offsetY }) => {
          dragRef.current.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
        },
      });
    }

     // Destroy instance on unmount
    return () => {
      if (dragInstance.current) {
        dragInstance.current.destroy();
        dragInstance.current = null;
      }
    };
  }, []); // Only runs once on mount

 // Update 'disabled' option when 'isDisabled' changes
  useEffect(() => {
    if (dragInstance.current) {
      dragInstance.current.updateOptions({ disabled: isDisabled });
    }
  }, [isDisabled]);

  const toggleDrag = () => {
    setIsDisabled(prevState => !prevState);
  };

  return (
    <div>
      <button onClick={toggleDrag}>
        {isDisabled ? 'Activate Drag ' : 'Deactivate Drag'}
      </button>
      <div
        ref={dragRef}
        id="drag"
        style={{
          width: '100px',
          height: '100px',
          backgroundColor: 'lightblue',
          position: 'absolute',
          cursor: isDisabled ? 'not-allowed' : 'move',
        }}
      >
        Drag Me!
      </div>
    </div>
  );
}

export default App;

Thank you for considering this request! I believe including more examples like this will further enhance the value of this great library.

@PuruVJ
Copy link
Owner

PuruVJ commented Nov 6, 2024

Thanks a lot for this! Yeah, the docs could be better, I made plans for detailed guides but never got the time to do so. PRs appreciated for a new guides/:slug category if you'd be up for it.

Also, aside, why using @neodrag/vanilla in a react app 😅? @neodrag/react should work better

@EmreDemirkapi
Copy link
Author

Thank you for the offer! Unfortunately, as a student, I’m a bit short on time.
I should mention that I’m still a bit of a React frontend beginner 😅 and currently limited to an older React version, which is why I stick to using vanilla.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants