-
Notifications
You must be signed in to change notification settings - Fork 9
/
.code-samples.meilisearch.yaml
70 lines (63 loc) · 2.72 KB
/
.code-samples.meilisearch.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
landing_getting_started_1: |-
import React from 'react';
import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch-dom';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
const searchClient = instantMeiliSearch(
"http://localhost:7700",
"searchKey"
);
const App = () => (
<InstantSearch
indexName="movies"
searchClient={searchClient}
>
<SearchBox />
<Hits hitComponent={Hit} />
</InstantSearch>
);
const Hit = (props) => (<Highlight attribute="title" hit={props.hit} />);
getting_started_front_end_integration_md: |-
The following code sample uses [React](https://reactjs.org/), a JavaScript library for building web user interfaces.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
</head>
<body>
<div id="app" class="wrapper"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/ReactInstantSearchDOM.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script>
const { InstantSearch, SearchBox, Hits, Highlight, Configure } = ReactInstantSearchDOM;
const searchClient = instantMeiliSearch(
"http://localhost:7700"
);
const App = () => (
React.createElement(InstantSearch, {
indexName: "movies",
searchClient: searchClient
}, [
React.createElement(SearchBox, { key: 1 }),
React.createElement(Hits, { hitComponent: Hit, key: 2 }),
React.createElement(Configure, { hitsPerPage: 10 })]
)
);
const Hit = (props) => (
React.createElement(Highlight, {
attribute: "title",
hit: props.hit
})
);
ReactDOM.createRoot(document.querySelector('#app')).render(App());
</script>
</html>
```
Here's what's happening:
- The `< div id="app">` inside `<body>` is React's entry point. `instant-meilisearch` creates the search bar and the search result container inside this HTML element by manipulating the DOM
- The first four`<script src="…">` tags import all the libraries required to run `instant-meilisearch` in [React](https://reactjs.org/).
- The last `<script>` tag initializes React, customizes `instant-meilisearch`, and creates all the required UI elements inside `<div id="app">`