> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Display Networks

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

You can display the current and available networks for a wallet by using the [useDynamicContext](https://docs.dynamic.xyz/docs/react/reference/hooks/usedynamiccontext.md) & [getNetwork](https://docs.dynamic.xyz/docs/react/reference/utilities/getnetwork.md) hooks.

> [!NOTE]
>
> This example is for EVM networks only

```tsx React theme={"system"}
import { useDynamicContext, getNetwork } from '@dynamic-labs/sdk-react-core'

const CustomNetworkPicker = () => {
  const [currentNetwork, setCurrentNetwork] = useState(null)
  const { primaryWallet } = useDynamicContext()

  const handleNetworkChange = async (event) => {
    const chainId = parseInt(event.target.value)

    if (primaryWallet?.connector?.supportsNetworkSwitching()) {
      try {
        return await primaryWallet?.connector?.switchNetwork({
          networkChainId: chainId,
        })
      } catch (error) {
        console.error('Error switching network', error)
      }
    }
  }

  useEffect(() => {
    if (!currentNetwork)
      getNetwork(primaryWallet?.connector).then((network) => {
        setCurrentNetwork(network)
      })
  }, [primaryWallet])

  return (
    <>
      {currentNetwork && (
        <Select defaultValue={currentNetwork} onChange={handleNetworkChange}>
          {primaryWallet?.connector?.evmNetworks?.map((network) => (
            <option key={network.chainId} value={network.chainId}>
              {network.name}
            </option>
          ))}
        </Select>
      )}
    </>
  )
}
```

> [!NOTE]
>
> Using the JavaScript SDK? See [Getting Active Network](https://docs.dynamic.xyz/docs/javascript/reference/wallets/get-active-network.md) and [Switching Active Network](https://docs.dynamic.xyz/docs/javascript/reference/wallets/switch-active-network.md) for the equivalent guides.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.