-
Notifications
You must be signed in to change notification settings - Fork 385
/
README.md
129 lines (86 loc) · 3.75 KB
/
README.md
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<div align="center">
[](https://docsearch.algolia.com)
The easiest way to add search to your documentation – for free.
[](https://app.netlify.com/sites/docsearch/deploys) [](https://www.npmjs.com/package/@docsearch/js/v/alpha) [](./LICENSE)
<p align="center">
<strong>
<a href="https://docsearch.algolia.com">Documentation</a> •
<a href="https://codesandbox.io/s/docsearchjs-v3-playground-z9oxj">JavaScript Playground</a> •
<a href="https://codesandbox.io/s/docsearch-react-v3-playground-619yg">React Playground</a>
</strong>
</p>
</div>
---
DocSearch crawls your documentation, pushes the content to an Algolia index and provides a dropdown search experience on your website.
## Preview
| Light | Dark |
| --- | --- |
|  |  |
## Usage
> Don't have your Algolia credentials yet? [Apply to DocSearch](https://docsearch.algolia.com/apply)!
### JavaScript
#### Installation
```sh
yarn add @docsearch/js@3
# or
npm install @docsearch/js@3
```
If you don’t want to use a package manager, you can use a standalone endpoint:
```html
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
```
#### Get started
To get started, you need a [`container`](https://docsearch.algolia.com/docs/api#container) for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:
```html
<div id="docsearch"></div>
```
Then, insert DocSearch into it by calling the [`docsearch`](https://docsearch.algolia.com/docs/api) function and providing the container. It can be a [CSS selector](https://developer.mozilla.org/en-us/docs/web/css/css_selectors) or an [Element](https://developer.mozilla.org/en-us/docs/web/api/htmlelement).
Make sure to provide a [`container`](https://docsearch.algolia.com/docs/api#container) (for example, a `div`), not an `input`. DocSearch generates a fully accessible search box for you.
```js app.js
import docsearch from '@docsearch/js';
import '@docsearch/css';
docsearch({
container: '#docsearch',
appId: 'YOUR_APP_ID',
indexName: 'YOUR_INDEX_NAME',
apiKey: 'YOUR_SEARCH_API_KEY',
});
```
### React
#### Installation
```bash
yarn add @docsearch/react@3
# or
npm install @docsearch/react@3
```
If you don’t want to use a package manager, you can use a standalone endpoint:
```html
<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@3"></script>
```
#### Get started
DocSearch generates a fully accessible search box for you.
```jsx App.js
import { DocSearch } from '@docsearch/react';
import '@docsearch/css';
function App() {
return (
<DocSearch
appId="YOUR_APP_ID"
indexName="YOUR_INDEX_NAME"
apiKey="YOUR_SEARCH_API_KEY"
/>
);
}
export default App;
```
## Styling
[Read documentation →](https://docsearch.algolia.com/docs/styling)
## Related projects
DocSearch is made of the following repositories:
- **[algolia/docsearch](https://github.com/algolia/docsearch)**: DocSearch source code.
- **[algolia/docsearch/packages/website](https://github.com/algolia/docsearch/tree/main/packages/website)**: DocSearch website and documentation.
- **[algolia/docsearch-configs](https://github.com/algolia/docsearch-configs)**: DocSearch websites configurations that DocSearch powers.
- **[algolia/docsearch-scraper](https://github.com/algolia/docsearch-scraper)**: DocSearch crawler that extracts data from your documentation.
## License
[MIT](LICENSE)