ElasticPress React

ElasticPress React is a library of React components to supercharge your headless WordPress website with ElasticPress.

Requirements

• Elasticsearch per ElasticPress requirements.
• WordPress website running ElasticPress.

Installation

To install ElasticPress React, simply install via npm:

npm install @10up/elasticpress-react --save

You will need an Elasticsearch instance and a WordPress website running ElasticPress.

Components

ElasticPressProvider

You must wrap your application with ElasticPressProvider in order to use the ElasticPress components.

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

Autosuggest

This component outputs a search field that when typed in will autosuggest results to the user.

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>
    </>
);

Screenshot

Related Content

This component outputs content related to a post.

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"
        />
    </>
);

Search and Post Results

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>
    );
};

Screenshot

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Changelog

A complete listing of all notable changes to ElasticPress React components are documented in CHANGELOG.md.

Contributing

Please read CODE_OF_CONDUCT.md for details on our code of conduct, CONTRIBUTING.md for details on the process for submitting pull requests to us, and CREDITS.md for a listing of maintainers of, contributors to, and libraries used by ElasticPress React components.

Like what you see?