Necessitates Proper Modularity

    @10up/elasticpress-react

    2.1.1 • Public • Published

    ElasticPress React

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

    Support Level Release Version GPLv2 License

    Requirements

    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

    Autosuggest 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

    Posts 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?

    Work with us at 10up

    Install

    npm i @10up/elasticpress-react

    DownloadsWeekly Downloads

    94

    Version

    2.1.1

    License

    GPL-2.0-only

    Unpacked Size

    149 kB

    Total Files

    6

    Last publish

    Collaborators

    • fabiankaegy
    • brandwaffle
    • eugene-manuilov
    • christianc1
    • nicholasio
    • joesnellpdx
    • tlovett1
    • devinle