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

Controller as context #24

Merged
merged 3 commits into from
Mar 26, 2021

Conversation

switchnollie
Copy link
Contributor

The approach using child.type.displayName only works if the Scene component is a direct child of the Controller component.
This approach uses the React Context API to pass down the controller prop and allows the Scene component to be anywhere in the component hierarchy (if it's a child of Controller obviously).

Copy link
Owner

@bitworking bitworking left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey thanks, looks good. But I have to test it out first.

@cbravo
Copy link

cbravo commented May 22, 2020

hey @switchnollie I am also looking at doing something like this using a hooks based approach. I am creating a custom context hook called useScrollMagic to access the controller. I am also using a useEffect to populate the controller but maybe this isn't needed. It is a work in progress so there may be bugs...What do you think?

here is my code for reference:

import ScrollMagic from 'scrollmagic';

const ScrollMagicContext = createContext();

const useScrollMagic = () => {
  const context = useContext(ScrollMagicContext);
  if (context === undefined) {
    throw new Error('useScrollMagic must be used within a ScrollMagicProvider');
  }
  return context;
};

const ScrollMagicProvider = ({ children, ...controllerProps }) => {
  const [controller, setController] = useState();

  useEffect(() => {
    const controller = new ScrollMagic.Controller(controllerProps);
    setController(controller);
  }, [controllerProps]);

  return (
    <ScrollMagicContext.Provider value={controller}>
      {children}
    </ScrollMagicContext.Provider>
  );
};

export { ScrollMagicProvider, useScrollMagic };

@vrgimael
Copy link

Hey there, I've been having the same problem and reading your issues and now PR - does anybody have any update on this?

Copy link

@vrgimael vrgimael left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bitworking I just tested it and it seems good to be working well, it resolves a huge pain

@refactorized
Copy link

I honestly assumed this was how it worked, and ended up here in search of reasons my code wasn't working out. Please accept this PR or at least call this out.

@bitworking bitworking merged commit 597f40c into bitworking:master Mar 26, 2021
@refactorized
Copy link

zomg, thank you! I need to use this functionality today, and it was merged 7 hours ago!

@bitworking
Copy link
Owner

Haha nice, I'm sorry. I just do this in my freetime which I don't have much and currently don't use it in any project by myself. That's why changes take very long..

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

Successfully merging this pull request may close these issues.

5 participants