The Morph.Provider component is a crucial setup component that must wrap your application to enable Morph functionality. It:

  • Initializes the Morph SDK with your configuration
  • Provides configuration context to all Morph components
  • Automatically handles environment variable detection
  • Manages the Morph client instance lifecycle

​
Installation

yarn add @runmorph/atoms

​
Environment Variables

The provider automatically detects your public key from the following environment variables (in order of precedence):

  1. MORPH_PUBLIC_KEY
  2. NEXT_PUBLIC_MORPH_PUBLIC_KEY
  3. VITE_MORPH_PUBLIC_KEY
  4. REACT_APP_MORPH_PUBLIC_KEY

​
Usage

"use client"
import { Morph } from "@runmorph/atoms";

function App({ children }) {
    return (
        <Morph.Provider>
            {children}
        </Morph.Provider>
    );
}

export default App;

​
Props

​
config
object
​
children
ReactNode
required

The child components that will have access to the Morph context.

​
Best Practices

  1. Place the MorphProvider as high as possible in your component tree
  2. Use environment variables for public key management in development
  3. Explicitly pass configuration in production environments
  4. Implement error boundaries around the provider for graceful error handling

​
Security Considerations

  1. Never expose your private key through the provider
  2. Use appropriate environment variable prefixes for your framework
  3. Implement proper CSP policies for your deployment environment
  4. Keep your public key secure and rotate if compromised