Skip to main content

​
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.