@rownd/remix
v2.6.0
Published
### Installation
Downloads
141
Keywords
Readme
Remix
Installation
Simply run npm install @rownd/remix or yarn add @rownd/remix.
Setup
The library provides a React provider for the client and a higher-order function for the server.
In your app's root.tsx file, use the Remix Rownd provider to wrap children,
likely before other providers:
root.tsx
...
import { RemixRowndProvider } from '@rownd/remix';
...
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<RemixRowndProvider appKey="YOUR_APP_KEY">
{children}
</RemixRowndProvider>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}In your app's entry.server.ts file, add the Rownd handle request higher-order
function with your server's request handler handleRequest:
entry.server.ts
...
import { withRowndHandleRequest } from '@rownd/remix/server';
...
export default withRowndHandleRequest(function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
loadContext: AppLoadContext
) {
return ...
});Protected component
To protect a component from being accessed by unauthenticated users, you can use
the withRowndRequireSignIn higher-order component and the withRowndLoader
higher-order function.
import type { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import {
withRowndRequireSignIn,
useRownd,
} from '@rownd/remix';
import {
withRowndLoader,
} from '@rownd/remix/server';
export const loader = withRowndLoader(async function (
{ context, request }: LoaderFunctionArgs,
{ user_id, access_token }
) {
const authenticatedFetch = await fetch('https:random.com/posts',{
headers: {
Authorization: `Bearer ${access_token}`,
},
})
const posts = await authenticatedFetch.json();
return { posts, user_id };
});
function Index() {
const { signOut } = useRownd();
const { posts, user_id } = useLoaderData();
return (
<div>
...
<h1>User ID: {user_id}</h1>
<button onClick={signOut}>Sign out</button>
</div>
);
}
function Fallback() {
return <div>Loading...</div>;
}
export default withRowndRequireSignIn(Index, useLoaderData, Fallback);API reference
Please see the React SDK for details on Rownd Client React API's.