injectStyles

Overview

Injects CSS into InterwovenKit’s Shadow DOM by appending a <style> element.
Required for correct visual rendering. Must be called before rendering InterwovenKit components.
Call once at app startup in your top-level Providers component.
Browser-only (requires document).

Prerequisites

Must be called in a browser environment (document must exist).
Client-only (no SSR): Put this in a use client provider tree, or use a dynamic import in Next.js.
Should be called before InterwovenKitProvider renders (typically in the same component).

Quickstart

"use client"

import { PropsWithChildren, useEffect } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { WagmiProvider } from "wagmi"
import {
  injectStyles,
  InterwovenKitProvider,
  MAINNET,
} from "@initia/interwovenkit-react"
import interwovenKitStyles from "@initia/interwovenkit-react/styles.js"

const queryClient = new QueryClient()
const wagmiConfig = /* your wagmi config */

export default function Providers({ children }: PropsWithChildren) {
  useEffect(() => {
    injectStyles(interwovenKitStyles)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <InterwovenKitProvider {...MAINNET}>
          {children}
        </InterwovenKitProvider>
      </WagmiProvider>
    </QueryClientProvider>
  )
}

This example shows the typical usage pattern. For complete setup configurations, see Provider Setup.

API

function injectStyles(css: string): void

Injects the provided CSS string into InterwovenKit’s Shadow DOM. The css parameter should be a string containing CSS rules. Returns void.

Notes

Each call appends a new <style> element to the Shadow DOM.
For complete setup configurations, see Provider Setup.

useUsernameQuery MoveError

⌘I

InterwovenKit

Integrations

Features

API Reference

Overview

Prerequisites

Quickstart

API

Notes

​Overview

​Prerequisites

​Quickstart

​API

​Notes

Overview

Prerequisites

Quickstart

API

Notes