<ElasticPressProvider
		node="http://elasticpress.test/__elasticsearch"
		indexName="elasticpresstest-post-1"
	>
		{/* ElasticPress Components */}
	</ElasticPressProvider>

import { AutosuggestField } from '@10up/elasticpress-react';

const MyComponent = () => (
	<>
		<p>Here is my fancy new component.</p>

		<p>Here's a search input with autosuggest:</p>

		<ElasticPressProvider
				node="http://elasticpress.test/__elasticsearch"
				indexName="elasticpresstest-post-1"
				loadInitialData={false}
			>
				<AutosuggestField />
			</ElasticPressProvider>
	</>
);

import { RelatedContent } from '@10up/elasticpress-react';

const MyComponent = () => (
	<>
		<p>Here is my fancy new component.</p>

		<p>Here is some related content to post 5:</p>

		<RelatedContent
			wpApiRoot="https://mysite.com/wp-json"
			postId="5"
		/>
	</>
);

import { PostContextProvider, SearchField, Posts } from '@10up/elasticpress-react';

const MyComponent = () => {
	// Make sure to wrap your components with the provider.
	return (
		<ElasticPressProvider
			node="http://elasticpress.test/__elasticsearch"
			indexName="elasticpresstest-post-1"
		>
			<div>
				<SearchField />
			</div>

			<div>
				<Posts />
			</div>
		</ElasticPressProvider>
	);
};