Guides
React
Integrate Glean Search into your React application
The following is an example usage of the inline components from within React. The imports used are custom, but should be self-explanatory in context.
import { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'
import injectScript from 'core/lib/injectScript'
import { QueryParam } from 'core/lib/QueryParam'
import { useLazyThunk } from 'core/redux/hooks'
import { selectBasePath } from 'core/redux/selectors/auth'
import { CreateAuthTokenResponse } from 'core/services/query_endpoint/models'
import { Theme } from 'embedded_search/Theme'
import { useQueryParam } from 'web/common/lib/hooks'
import { getWebAppUrl } from 'web/routing/lib/paths'
import styles from './styles/GleanWebSDKStyles'
const loginThunks = () => import('web/login/lib/thunks')
const light: Theme = {
borderLight: '#eaebed',
hover: '#f5fcfc',
primaryHighlight: '#087d76',
primaryHover: '#1ca99e',
selected: '#e8fcfb',
textPrimary: '#1b2126',
textSecondary: '#71747d',
visited: '#7400be'
}
interface GleanWebSDKProps {
authToken?: CreateAuthTokenResponse
}
const GleanSearch = ({ authToken }: GleanWebSDKProps) => {
const [query, setQuery] = useQueryParam(QueryParam.QUERY)
const [datasource] = useQueryParam(QueryParam.TAB)
const elementRef = useRef<HTMLDivElement>(null)
const basePath = useSelector(selectBasePath)
useEffect(() => {
if (!elementRef.current) return
window.GleanWebSDK.renderSearchBox(elementRef.current, {
authToken,
backend: basePath,
datasource,
onSearch: setQuery,
query,
searchBoxCustomizations: {
borderRadius: 10,
boxShadow: 'none',
horizontalMargin: 0,
placeholderText: 'Search for anything (Beta)',
verticalMargin: 0
},
theme: { light }
})
}, [authToken, basePath, datasource, query, setQuery])
return <div ref={elementRef} style={styles.searchBox} />
}
const GleanSearchResultsPage = ({ authToken }: GleanWebSDKProps) => {
const [query, setQuery] = useQueryParam(QueryParam.QUERY)
const [datasource, setDatasource] = useQueryParam(QueryParam.TAB)
const elementRef = useRef<HTMLDivElement>(null)
const basePath = useSelector(selectBasePath)
useEffect(() => {
if (!elementRef.current) return
window.GleanWebSDK.renderSearchResults(elementRef.current, {
authToken,
backend: basePath,
datasource,
onDatasourceChange: setDatasource,
onSearch: setQuery,
query,
theme: { light }
})
}, [authToken, basePath, datasource, query, setDatasource, setQuery])
return <div ref={elementRef} style={styles.serp} />
}
const GleanWebSDKGallery = () => {
const fetchAuthTokenThunk = useLazyThunk(loginThunks, 'fetchAuthToken')
const [authToken, setAuthToken] = useState<CreateAuthTokenResponse | undefined>()
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
;(async () => {
setAuthToken(await fetchAuthTokenThunk())
})()
injectScript({ id: 'embedded_search', src: getWebAppUrl('/embedded-search-latest.min.js') }).then(() =>
setIsLoading(false)
)
}, [fetchAuthTokenThunk])
if (isLoading) return null
return (
<div style={styles.container}>
<GleanSearch authToken={authToken} />
<GleanSearchResultsPage authToken={authToken} />
</div>
)
}
export default GleanWebSDKGallery
Was this page helpful?