Walkthrough: Adding widgets to the React application

This walkthrough is the part four of the Rapid development using Search UI components walkthrough series.

In this last step of developing the UI for Sitecore Search, 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 Search. 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-search/react";
import MyGlobalPreviewSearchWidget from "./widgets/myGlobalPreviewSearch";
import MySearchResultsWidget from "./widgets/mySearchResultsWidget";


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

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearchWidget rfkId="header_ps" />
            </header>
          
            <div class="content">
                <MySearchResultsWidget rfkid="sdk_search">
            </div>
          
            <footer>
                FOOTER CONTENT GOES HERE
            </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-search/ui'; 

const myTheme = createTheme();
```

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

RequestResponse

import { createTheme } from '@sitecore-search/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>Nested content.</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