feat(transform-hook): UseTransformComponent added

[tylerlaws0n]

Hook added to return an element, given the current state

Given that v3 introduces the dynamic where useTransformEffect is the only hook that has up to date state:

https://github.com/prc5/react-zoom-pan-pinch/blob/c0871e27907c1e9338c613d1e5abfc98a873da52/CHANGELOG.md?plain=1#L5-L7

I wanted to suggest a new style of hook that could return an item, given the internal context.

The reason for this is the following pattern.

Currently if I want to write a component that uses state from inside the context I need to copy that state using useTransformEffect to another piece of state to use it like this:

const MyComponent: React.FC = () => {
  const [scale, setScale] = useState(0);

  useTransformEffect(({ state }) => {
    const currentScale = state.scale;

    setScale(currentScale);
  });

  return <div>My Scale is: {scale}</div>;
}

This works for what I am trying to do, but I have run into issues with synchronization and infinite loops when duplicating state like this.

The new hook I am proposing here should allow something like this:

const MyComponent: React.FC = () => {
  return useTransformComponent(({ state }) => {
    const currentScale = state.scale;

     return <div>My Scale is: {currentScale}</div>;
  });
}

This would remove the duplicated state and ensure that the same state being rendered on the page is the state coming from the context.

I can add docs, tests, and examples, but I wanted to see what the response from y'all was like before adding any of that.

[Dynrothe]

This would be a nice addition, shame that it wasn't merged.

[prc5]

Great job! 🚀

[github-actions]

🎉 This PR is included in version 3.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀