Examples

import { useClose, useOpenUrl, useViewProfile } from '@coinbase/onchainkit/minikit';

function Actions({ fid }) {
  const close = useClose();
  const viewProfile = useViewProfile();
  return (
    <>
      <button onClick={() => viewProfile(fid)}>Profile</button>
      <button onClick={close}>Close</button>
    </>
  );
}

import { sdk } from '@farcaster/miniapp-sdk';

function Actions({ fid }) {
  return (
    <>
      <button onClick={() => sdk.actions.viewProfile({ fid })}>Profile</button>
      <button onClick={() => sdk.actions.close()}>Close</button>
    </>
  );
}

const { context } = useMiniKit();
const { fid, username } = context?.user ?? {};

const [user, setUser] = useState(null);

useEffect(() => {
  const load = async () => {
    const ctx = await sdk.context;
    setUser(ctx?.user);
  };
  load();
}, []);

const { fid, username } = user ?? {};

import { useFrameContext } from '@/components/providers/FrameProvider';

const frameContext = useFrameContext();
const { fid, username } = frameContext?.context?.user ?? {};

const { setFrameReady, context, isSDKLoaded } = useMiniKit();

useEffect(() => {
  if (isSDKLoaded) setFrameReady();
}, [isSDKLoaded]);

const [ready, setReady] = useState(false);
const [context, setContext] = useState(null);

useEffect(() => {
  const init = async () => {
    const inMiniApp = await sdk.isInMiniApp();
    if (inMiniApp) {
      const ctx = await sdk.context;
      setContext(ctx);
      await sdk.actions.ready();
    }
    setReady(true);
  };
  init();
}, []);

usePrimaryButton(
  { text: `Clicked ${count}`, disabled: false },
  () => setCount(c => c + 1)
);

useEffect(() => {
  const setup = async () => {
    await sdk.actions.setPrimaryButton({
      text: "Action",
      disabled: false,
      hidden: false,
      loading: false
    });
  };
  setup();
}, []);

// Use regular React buttons for click handling

const { signIn } = useAuthenticate();
const result = await signIn({ nonce });
if (result === false) { /* failed */ }

const { token } = await sdk.quickAuth.getToken();
await fetch('/api/auth', {
  headers: { Authorization: `Bearer ${token}` }
});

const res = await sdk.quickAuth.fetch('/api/auth');

const { context } = useMiniKit();
const insets = context?.client?.safeAreaInsets;

const [insets, setInsets] = useState(null);

useEffect(() => {
  const load = async () => {
    const ctx = await sdk.context;
    setInsets(ctx?.client?.safeAreaInsets);
  };
  load();
}, []);

const addFrame = useAddFrame();
const result = await addFrame();

const result = await sdk.actions.addMiniApp();
if (result) {
  saveTokenToServer(result.url, result.token);
}