We consolidated this under replit/extensions
The React Extensions API Client comes with a set of hooks and components that combine to make a blazingly fast and seamless developer experience.
- Repositories
- NPM Packages
- GitHub Repository
- Documentation
- Resources
- API Modules
- React Client
- Discourse Category
- React Extension Template
npm install @replit/extensions-react
yarn add @replit/extensions-react
pnpm add @replit/extensions-react
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.
import { HandshakeProvider } from "@replit/extensions-react";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")).render(
<HandshakeProvider>
<App />
</HandshakeProvider>
);In the App function, check the handshake status with the useReplit hook.
import { useReplit } from "@replit/extensions-react";
function App() {
const { status, error, replit } = useReplit();
if (status === "loading") {
return <div>Loading...</div>;
}
if (status === "error") {
return <div>An error occurred: {error?.message}</div>;
}
return <div>Extension is Ready!</div>;
}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.