From 012ddd6dcb02705ddd2d9980302c1eebaf9b77c7 Mon Sep 17 00:00:00 2001
From: Miroslav Bauer <mirekys@gmail.com>
Date: Tue, 5 May 2026 16:03:12 +0200
Subject: [PATCH] docs: update code examples for React 18

---
 docs/docs/components/range_facet.md |  4 +-
 docs/docs/components/with_state.md  | 14 +++---
 docs/docs/connect_your_rest_apis.md | 64 +++++++++++--------------
 docs/docs/getting_started.md        | 72 +++++++++++++----------------
 docs/docs/main_concepts.md          | 56 ++++++++++------------
 5 files changed, 95 insertions(+), 115 deletions(-)

diff --git a/docs/docs/components/range_facet.md b/docs/docs/components/range_facet.md
index 001916b8..3e069cf2 100644
--- a/docs/docs/components/range_facet.md
+++ b/docs/docs/components/range_facet.md
@@ -116,7 +116,9 @@ Brief flow (matches the default behavior):
 Example with only histogram and custom filter facet:
 
 ```jsx
-class MyRangeFacet extends React.Component {
+import { Component } from "react";
+
+class MyRangeFacet extends Component {
   constructor(props) {
     super(props);
     const { min, max } = this.getMinMax();
diff --git a/docs/docs/components/with_state.md b/docs/docs/components/with_state.md
index 42eff16a..c9e89668 100644
--- a/docs/docs/components/with_state.md
+++ b/docs/docs/components/with_state.md
@@ -18,17 +18,17 @@ through its props it gains access to
 ## Usage
 
 ```jsx
-class _StateLogger extends Component {
-  render() {
-    return (
+function _StateLogger(props) {
+  return (
+    <>
       <div>
-        Current query state <pre>{JSON.stringify(this.props.currentQueryState, null, 2)}</pre>
+        Current query state <pre>{JSON.stringify(props.currentQueryState, null, 2)}</pre>
       </div>
       <div>
-        Current results state <pre>{JSON.stringify(this.props.currentResultsState, null, 2)}</pre>
+        Current results state <pre>{JSON.stringify(props.currentResultsState, null, 2)}</pre>
       </div>
-    );
-  }
+    </>
+  );
 }
 
 const StateLogger = withState(_StateLogger);
diff --git a/docs/docs/connect_your_rest_apis.md b/docs/docs/connect_your_rest_apis.md
index a3236763..847c1fc1 100644
--- a/docs/docs/connect_your_rest_apis.md
+++ b/docs/docs/connect_your_rest_apis.md
@@ -22,14 +22,12 @@ const searchApi = new OSSearchApi({
   }
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 
@@ -46,14 +44,12 @@ const searchApi = new InvenioSearchApi({
   }
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 
@@ -97,8 +93,8 @@ class MyResponseSerializer {
 Custom serializers can then be injected in the configuration of the adapter:
 
 ```jsx
-const MyRequestSerializer = new MyRequestSerializer();
-const MyResponseSerializer = new MyResponseSerializer();
+const myRequestSerializer = new MyRequestSerializer();
+const myResponseSerializer = new MyResponseSerializer();
 
 const searchApi = new OSSearchAPI({
   axios: {
@@ -106,19 +102,17 @@ const searchApi = new OSSearchAPI({
     timeout: 5000,
   },
   os: {
-    requestSerializer: MyRequestSerializer,
-    responseSerializer: MyResponseSerializer,
+    requestSerializer: myRequestSerializer,
+    responseSerializer: myResponseSerializer,
   },
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 
@@ -152,14 +146,12 @@ The new adapter is injected as prop in the main component:
 ```jsx
 const mySearchApi = new MySearchAPI();
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={mySearchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={mySearchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 
diff --git a/docs/docs/getting_started.md b/docs/docs/getting_started.md
index c6d314cf..312e707f 100644
--- a/docs/docs/getting_started.md
+++ b/docs/docs/getting_started.md
@@ -32,33 +32,31 @@ First, import the main component `ReactSearchKit`.
 import { ReactSearchKit } from 'react-searchkit';
 ```
 
-Then, add it to the content of your `render()` method to render [ReactSearchKit](components/react_search_kit.md).
+Then, add it to your app to render [ReactSearchKit](components/react_search_kit.md).
 You should end up with something similar to:
 
 ```jsx
-import React, { Component } from 'react';
 import { ReactSearchKit } from 'react-searchkit';
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit>
-        <h1>My search UI</h1>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit>
+      <h1>My search UI</h1>
+    </ReactSearchKit>
+  );
 }
 
 export default App;
 ```
 
+> React-SearchKit requires **React 18** or higher. Ensure your project uses compatible versions of `react` and `react-dom`.
+
 ## Connect REST API endpoint
 
 Change the `ReactSearchKit` props to define the REST API endpoint. For this example we are going to use [Zenodo APIs](https://zenodo.org).
 Import the Invenio adapter and provide the minimal configuration.
 
 ```jsx
-import React, { Component } from 'react';
 import { ReactSearchKit, InvenioSearchApi } from 'react-searchkit';
 
 const searchApi = new InvenioSearchApi({
@@ -67,14 +65,12 @@ const searchApi = new InvenioSearchApi({
   headers: { Accept: 'application/vnd.zenodo.v1+json' },
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        <h1>My search UI</h1>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      <h1>My search UI</h1>
+    </ReactSearchKit>
+  );
 }
 ```
 
@@ -91,16 +87,14 @@ import { ReactSearchKit, InvenioSearchApi, SearchBar } from 'react-searchkit';
 Then, add the component as a child of `ReactSearchKit`.
 
 ```jsx
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        <div style={{ margin: '2em auto', width: '50%' }}>
-          <SearchBar />
-        </div>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      <div style={{ margin: '2em auto', width: '50%' }}>
+        <SearchBar />
+      </div>
+    </ReactSearchKit>
+  );
 }
 ```
 
@@ -122,17 +116,15 @@ import { ReactSearchKit, InvenioSearchApi, SearchBar, ResultsList } from 'react-
 Then, add the component below the search bar.
 
 ```jsx
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        <div style={{ margin: '2em auto', width: '50%' }}>
-          <SearchBar />
-          <ResultsList />
-        </div>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      <div style={{ margin: '2em auto', width: '50%' }}>
+        <SearchBar />
+        <ResultsList />
+      </div>
+    </ReactSearchKit>
+  );
 }
 ```
 
diff --git a/docs/docs/main_concepts.md b/docs/docs/main_concepts.md
index 1bc080f6..cea2d2f3 100644
--- a/docs/docs/main_concepts.md
+++ b/docs/docs/main_concepts.md
@@ -115,14 +115,12 @@ You can control the app state externally using available events in `React-Search
 > Note: By default `React-SearchKit` is not registering any event. To enable this behaviour you need to pass in the root component the below variable:
 
 ```jsx
-class MyReactSearchKit extends Component {
-  render() {
-    return (
-      <ReactSearchKit {...this.props} eventListenerEnabled={true}>
-        {this.props.children}
-      </ReactSearchKit>
-    );
-  }
+function MyReactSearchKit(props) {
+  return (
+    <ReactSearchKit {...props} eventListenerEnabled={true}>
+      {props.children}
+    </ReactSearchKit>
+  );
 }
 ```
 
@@ -132,33 +130,29 @@ In order to trigger the `queryChanged` event you can use the `onQueryChanged` em
 ```jsx
 import { onQueryChanged } from 'react-searchkit';
 
-class MyExternalApp extends Component {
-    render() {
-        return (
-        <Button onClick={() => onQueryChanged({queryString: 'search'})}>Trigger Search</Button>
-        );
-    }
+function MyExternalApp() {
+  return (
+    <Button onClick={() => onQueryChanged({queryString: 'search'})}>
+      Trigger Search
+    </Button>
+  );
 }
 
-class MyReactSearchKit extends Component {
-  render() {
-    return (
-      <ReactSearchKit {...requiredProps} searchOnInit={false} eventListenerEnabled={true}>
-        {this.props.children}
-      </ReactSearchKit>
-    );
-  }
+function MyReactSearchKit(props) {
+  return (
+    <ReactSearchKit {...props} searchOnInit={false} eventListenerEnabled={true}>
+      {props.children}
+    </ReactSearchKit>
+  );
 }
 
-class MyApp extends Component {
-    render() {
-        return (
-            <>
-                <MyExternalApp />
-                <MyReactSearchKit />
-            </>
-        )
-    }
+function MyApp() {
+  return (
+    <>
+      <MyExternalApp />
+      <MyReactSearchKit />
+    </>
+  );
 }
 ```