Chapter 80: useRemotionEnvironment()

Core Idea

A React hook that provides information about the current Remotion Environment. This is the preferred way to access environment information.

Key Concepts

• Example
• Why use this hook instead of getRemotionEnvironment()?
• Compatibility
• See also

Code Examples

export const MyComp: React.FC = () => {
  const {isStudio, isPlayer, isRendering} = useRemotionEnvironment();

  if (isStudio) {
    return <div>I'm in the Studio!</div>;
  }

  if (isPlayer) {
    return <div>I'm in the Player!</div>;
  }

  if (isRendering) {
    return <div>I'm Rendering</div>;
  }

  return <div>Hello World!</div>;
};

• What it demonstrates: Usage pattern for useRemotionEnvironment() from the official docs.

Key Takeaways

1. Understand example when working with useRemotionEnvironment().
2. Understand why use this hook instead of getremotionenvironment()? when working with useRemotionEnvironment().
3. Understand compatibility when working with useRemotionEnvironment().
4. Understand see also when working with useRemotionEnvironment().

Connects To

• Cancel Render: related page in the Hooks & Data APIs section.
• Continue Render: related page in the Hooks & Data APIs section.
• Data Fetching: related page in the Hooks & Data APIs section.