docs: More refinement of the public documentation page

readme/limitless-ui-react.md

@@ -117,6 +117,8 @@ const SearchPage = () => {
         searchOptions={searchOptions}
         searchType="product"
       />
+
+      <Results resultComponent={(result) => <div>{result.title}</div>} />
     </div>
   );
 };
@@ -139,8 +141,8 @@ register them within React state:
 ```jsx
 import { useSearch } from '@bloomreach/limitless-ui-react';
 
-const SearchComponent = ({ configuration, searchOptions }) => {
-  const { response, loading, error } = useSearch('product', configuration, searchOptions);
+const SearchComponent = ({ query, configuration, searchOptions }) => {
+  const { response, loading, error } = useSearch('product', query, configuration, searchOptions);
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
@@ -161,18 +163,6 @@ the context and outputs state and handlers to build your own custom component:
 ```jsx
 import { useSearchBox, SearchContext } from '@bloomreach/limitless-ui-react';
 
-const Results = () => {
-  const context = useContext(SearchContext);
-  return context?.searchResponse?.response?.docs?.map((result) => {
-    return (
-      <div key={result.pid}>
-        <h2>{result.title}</h2>
-        <p>{result.description}</p>
-      </div>
-    );
-  });
-};
-
 const CustomSearchBox = (props) => {
   const { response, loading, error, changeHandler, submitHandler, resetHandler, inputValue } =
     useSearchBox(props);
@@ -184,7 +174,12 @@ const CustomSearchBox = (props) => {
       <button type="reset">Clear</button>
     </form>
 
-    <Results />
+    <Results resultComponent={() => (
+      <div key={result.pid}>
+        <h2>{result.title}</h2>
+        <p>{result.description}</p>
+      </div>
+    )} />
   );
 };
 ```
@@ -210,7 +205,6 @@ const SearchPage = () => {
         }}
       >
         <SearchBox.Suggestions
-          configuration={/* your configuration */}
           suggestOptions={/* your suggestion options */}
           onQuerySelect={(query, event) => {
             // Handle query selection
@@ -228,10 +222,8 @@ const SearchPage = () => {
 ### Using Components + Style bundle
 
 The headless components can be combined with the optional style bundle and to get a full
-'out-of-the-box' experience. One can simply import `style.css` from the package.
-
-<!-- ## Type documentation -->
-<!-- For a type reference see the TSDoc published [here](.) -->
+'out-of-the-box' experience. Simply import `style.css` from the package in your projects preferred
+way.
 
 ## Troubleshooting