Walkthrough: Adding widgets to the React application

This walkthrough is the part six of the Developing the UI walkthrough series.

During the last step of developing the UI for Sitecore Discover, you bring together previously created widget components into your React application.

This walkthrough describes how to:

Render with the WidgetsProvider component
Style widget components with a theme

Render with the WidgetsProvider component

The following code block shows the WidgetsProvider component with credentials for authentication when your domain is not set up with Discover. Here, publicSuffix has been set to true because the top-level domain of this implementation restricts cookies.

The following procedure and code block assume that you have the following configuration:

header_ps is a preview widget set to appear on all pages.
footer_rec is a recommendation widget set to appear on all pages.

To add header_ps and footer_rec to your webpage, paste the folllowing codeblock:

RequestResponse

import { WidgetsProvider }from "@sitecore-discover/react";
import MyGlobalPreviewSearch from "./widget_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";  


const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearch rfkId="header_ps" />
            </header>
          
            <div class="content">
                OTHER WIDGET COMPONENTS GO HERE
            </div>
          
            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};

Theming an application with CSS variables is the fastest way to style your components. You can use the default theme or a custom theme.

To create and use a custom theme:

In your React project, open your application component.
In the component, create a default theme object as shown in the following code block, and fix import statements.
RequestResponse
```
import { createTheme } from '@sitecore-discover/ui'; 

const myTheme = createTheme();
```

To create a custom theme, add CSS variables as shown in the following:

RequestResponse

import { createTheme } from '@sitecore-discover/ui'

const myTheme = createTheme({
  palette: {
    primary: {
      main: '#F00',
      light: '#EEECFB',
      dark: '#4A37D5',
      contrastText: '#fff',
    },
  }
});

In your application component, in the return statement, to the div wrapper of WidgetsProvider, set the value to style as shown in following:
RequestResponse
```
<div style={myTheme.style}>
  <WidgetsProvider>Content nested in theme.</WidgetsProvider>
</div>
```

Do you have some feedback for us?

If you have suggestions for improving this article,

Walkthrough: Adding widgets to the React application

Render with the WidgetsProvider component

Style widget components with a theme