Skip to content

docs: update code examples for React 18 #301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mirekys wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: update code examples for React 18 #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/docs/components/range_facet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
14 changes: 7 additions & 7 deletions docs/docs/components/with_state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
64 changes: 28 additions & 36 deletions docs/docs/connect_your_rest_apis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
```

Expand All @@ -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>
)
}
```

Expand Down Expand Up @@ -97,28 +93,26 @@ 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: {
url: 'https://my.os.backend.org/search/',
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>
)
}
```

Expand Down Expand Up @@ -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>
)
}
```

Expand Down
72 changes: 32 additions & 40 deletions docs/docs/getting_started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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>
);
}
```

Expand All @@ -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>
);
}
```

Expand All @@ -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>
);
}
```

Expand Down
56 changes: 25 additions & 31 deletions docs/docs/main_concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
```

Expand All @@ -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 />
</>
);
}
```

Expand Down
Loading