Replit Extensions API Client (React)

The React Extensions API Client comes with a set of hooks and components that combine to make a blazingly fast and seamless developer experience.

- NPM Packages
- https://www.npmjs.com/package/@replit/extensions
- https://www.npmjs.com/package/@replit/extensions-react
- Repository
- Documentation
- Resources
- API Modules
- React Client
- Discourse Category
- React Extension Template
- HTML/CSS/JS Extension Template

Installation

``
npm install @replit/extensions-react
yarn add @replit/extensions-react
pnpm add @replit/extensions-react
`

Usage

Fork the React Extension Template to get started. Alternatively, you can start from scratch by wrapping your application with the HandshakeProvider component imported from @replit/extensions-react.

`tsx
import { HandshakeProvider } from "@replit/extensions-react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(



);
`

In the App function, check the handshake status with the useReplit hook.

`tsx
import { useReplit } from "@replit/extensions-react";

function App() {
const { status, error, replit } = useReplit();

if (status === "loading") {
return

Help

If you don't understand something in the documentation, have found a bug, or would like to request a feature, you can get help on the Ask Forum.