Limit query characters

src/App.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { setQuery } from './app/searchSlice'
 import { setShowName } from './app/displaySlice'
@@ -9,9 +9,13 @@ function App() {
 	const inputSearch = useRef()
 	const checkShowName = useRef()
 	const dispatch = useDispatch()
+	const [currentQuery, setCurrentQuery] = useState("")
 
 	function queryOnChange () {
-		dispatch(setQuery(inputSearch.current.value))
+		let query = inputSearch.current.value
+		query = query.replace(/[^a-zA-Z0-9\- ]/, "")
+		setCurrentQuery(query)
+		dispatch(setQuery(query))
 	}
 
 	function showNameOnChange () {
@@ -25,7 +29,7 @@ function App() {
 	return (
 		<>
 			<div className="pixel-input">
-				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
+				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } value={ currentQuery } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
 			</div>
 			<div id='display-options'>
 				<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />

src/IconList.jsx

@@ -36,7 +36,7 @@ export const IconList = function () {
 	if (icons.length == 0) {
 		return (
 			<div className="no-result">
-				No icon found for<br />"{query}"
+				No icon found for<br />"{query.trim().length > 24 ? query.trim().substring(0,24) + '...' : query.trim()}"
 			</div>
 		)
 	}

src/index.css

@@ -342,6 +342,7 @@ ul.icon-list a {
 .no-result {
 	text-align: center;
 	padding: 6rem 0;
+	overflow-x: hidden;
 }
 
 @media (hover:hover) {