38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
import { useEffect, useRef } from 'react'
|
||
import { useDispatch } from 'react-redux'
|
||
import { setQuery } from './app/searchSlice'
|
||
import { setShowName } from './app/displaySlice'
|
||
import { IconList } from './IconList'
|
||
import './App.css'
|
||
|
||
function App() {
|
||
const inputSearch = useRef()
|
||
const checkShowName = useRef()
|
||
const dispatch = useDispatch()
|
||
|
||
function queryOnChange () {
|
||
dispatch(setQuery(inputSearch.current.value))
|
||
}
|
||
|
||
function showNameOnChange () {
|
||
dispatch(setShowName(checkShowName.current.checked))
|
||
}
|
||
|
||
useEffect(() => {
|
||
inputSearch.current.focus()
|
||
})
|
||
|
||
return (
|
||
<>
|
||
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" />
|
||
<div id='display-options'>
|
||
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
|
||
<label htmlFor="checkShowName">Display icon names</label>
|
||
</div>
|
||
<IconList></IconList>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default App
|