https://github.com/10up/elasticpress-react
Use ElasticPress with React.
https://github.com/10up/elasticpress-react
elasticpress elasticsearch react wordpress
Last synced: 5 months ago
JSON representation
Use ElasticPress with React.
- Host: GitHub
- URL: https://github.com/10up/elasticpress-react
- Owner: 10up
- License: gpl-2.0
- Created: 2020-07-22T17:46:26.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2024-04-25T00:36:08.000Z (over 1 year ago)
- Last Synced: 2025-07-17T13:03:15.315Z (6 months ago)
- Topics: elasticpress, elasticsearch, react, wordpress
- Language: JavaScript
- Homepage: https://elasticpress.io
- Size: 2.99 MB
- Stars: 31
- Watchers: 55
- Forks: 3
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ElasticPress React
> ElasticPress React is a library of React components to supercharge your headless WordPress website with ElasticPress.
[](#support-level) [](https://github.com/10up/elasticpress-react/releases/latest) [](https://github.com/10up/elasticpress-react/blob/develop/LICENSE.md)
## Requirements
* Elasticsearch per [ElasticPress requirements](https://github.com/10up/ElasticPress#requirements).
* WordPress website running [ElasticPress](https://elasticpress.io).
## 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](https://elasticpress.io).
## Components
### ElasticPressProvider
You must wrap your application with `ElasticPressProvider` in order to use the ElasticPress components.
```js
{/* ElasticPress Components */}
```
### Autosuggest
This component outputs a search field that when typed in will autosuggest results to the user.
```js
import { AutosuggestField } from '@10up/elasticpress-react';
const MyComponent = () => (
<>
Here is my fancy new component.
Here's a search input with autosuggest:
>
);
```
#### Screenshot
### Related Content
This component outputs content related to a post.
```js
import { RelatedContent } from '@10up/elasticpress-react';
const MyComponent = () => (
<>
Here is my fancy new component.
Here is some related content to post 5:
>
);
```
### Search and Post Results
```js
import { PostContextProvider, SearchField, Posts } from '@10up/elasticpress-react';
const MyComponent = () => {
// Make sure to wrap your components with the provider.
return (
);
};
```
#### 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](https://github.com/10up/elasticpress-react/blob/develop/CHANGELOG.md).
## Contributing
Please read [CODE_OF_CONDUCT.md](https://github.com/10up/elasticpress-react/blob/develop/CODE_OF_CONDUCT.md) for details on our code of conduct, [CONTRIBUTING.md](https://github.com/10up/elasticpress-react/blob/develop/CONTRIBUTING.md) for details on the process for submitting pull requests to us, and [CREDITS.md](https://github.com/10up/elasticpress-react/blob/develop/CREDITS.md) for a listing of maintainers of, contributors to, and libraries used by ElasticPress React components.
## Like what you see?
