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

# Login Views Tutorial

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

In this guide we will set up a simple example of programmatically changing views based on where the user is coming from.

<Tip>
  We're going to be referring a lot to the views type, found [here](/react/using-our-ui/design-customizations/views).
</Tip>

### Determine where the user is coming from

In our example, we will show a different signup/login experience to users coming from a specific URL. We will use the `useLocation` hook from `react-router-dom` to get the current URL.

```jsx theme={"system"}
import { useLocation } from "react-router-dom";

const location = useLocation();
```

If the user is coming from /landing-page/facebook, we will show only a Facebook button which gives you an embedded wallet. If you are coming from /landing-page/web3, we will show the default signup/login experience.

In the below code we are using the `useState` hook to create a state variable called `source` and a setter function called `setSource`. We are then using the `useEffect` hook to set the source to the current location.

```jsx theme={"system"}
const [source, setSource] = useState("");

const location = useLocation();

const isFacebookCampaign = location.pathname === "/landing-page/facebook";
const isWeb3Campaign = location.pathname === "/landing-page/web3";

const views = isFacebook ? "facebook" : isWeb3Campaign ? "web3" : "";

useEffect(() => {
  setSource(views);
}, [views]);
```

### Declare the views

Views are passed in via the overrides key on the settings prop of [DynamicContextProvider](/react/reference/providers/dynamiccontextprovider)

The view object itself is of a specific type and you can review the type on [the reference](/react/reference/objects/views).

In our case, we want two different views, one for Facebook and one for Web3. We will use the `facebook` and `web3` views.

```jsx theme={"system"}
const FACEBOOK_VIEW = {
  type: SdkViewType.Login,
  sections: [
    {
      type: SdkViewSectionType.Social,
      defaultItem: "facebook",
    },
  ],
};
```

```jsx theme={"system"}
const WEB3_VIEW = {
  type: SdkViewType.Login,
  sections: [
    { type: SdkViewSectionType.Wallet },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Email,
    },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Social,
      defaultItem: "twitter",
    },
  ],
};
```

### Setting types to state

We want somewhere to store our view overrides. We will use the `useState` hook to create a state variable called `viewOverrides` and a setter function called `setViewOverrides`.

```jsx theme={"system"}
const [viewOverrides, setViewOverrides] = useState([]);
```

### Setting the view overrides

We will use the `useEffect` hook to set the view overrides to the correct view based on the source.

```jsx theme={"system"}
useEffect(() => {
  if (source === "facebook") {
    setViewOverrides([FACEBOOK_VIEW]);
  } else if (source === "web3") {
    setViewOverrides([WEB3_VIEW]);
  } else {
    setViewOverrides([]);
  }
}, [source]);
```

### Adding to the DynamicContextProvider

We can now pass the viewOverrides to the `DynamicContextProvider`.

<DynamicContextProvider
  settings={{
environmentId: "fba5127c-21c0-430e-bb03-7dc8f6b11397",
overrides: { views: viewOverrides },
}}
>
  <DynamicWidget />
</DynamicContextProvider>

### Putting it all together

```jsx theme={"system"}
import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import {
  DynamicContextProvider,
  DynamicWidget,
} from "@dynamic-labs/sdk-react-core";

import { SdkViewSectionType, SdkViewType } from "@dynamic-labs/sdk-api";

const FACEBOOK_VIEW = {
  type: SdkViewType.Login,
  sections: [
    {
      type: SdkViewSectionType.Social,
      defaultItem: "facebook",
    },
  ],
};

const WEB3_VIEW = {
  type: SdkViewType.Login,
  sections: [
    { type: SdkViewSectionType.Wallet },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Email,
    },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Social,
      defaultItem: "twitter",
    },
  ],
};

const App = () => {
  const [source, setSource] = useState("");
  const [viewOverrides, setViewOverrides] = useState([]);

  const location = useLocation();

  const isFacebookCampaign = location.pathname === "/landing-page/facebook";
  const isWeb3Campaign = location.pathname === "/landing-page/web3";

  useEffect(() => {
    setSource(isFacebookCampaign ? "facebook" : isWeb3Campaign ? "web3" : "");
  }, [isFacebookCampaign, isWeb3Campaign]);

  useEffect(() => {
    if (source === "facebook") {
      setViewOverrides([FACEBOOK_VIEW]);
    } else if (source === "web3") {
      setViewOverrides([WEB3_VIEW]);
    } else {
      setViewOverrides([]);
    }
  }, [source]);

  return (
    <DynamicContextProvider
      settings={{
        environmentId: "fba5127c-21c0-430e-bb03-7dc8f6b11397",
        overrides: { views: viewOverrides },
      }}
    >
      <DynamicWidget />
    </DynamicContextProvider>
  );
};

export default App;
```

### Adding embedded wallets

That's it! To make sure our facebook group also get an embedded wallet,follow [this guide](/overview/wallets/embedded-wallets/mpc/overview)