-
+
+
```
This pattern allows you to:
-- Compose components flexibly
+
+- Compose components with flexibility
- Control exactly which subcomponents to include
- Maintain a clear hierarchy of related components
-1. **Web SDK Direct Usage**: Use the
- [@bloomreach/discovery-web-sdk](https://github.com/bloomreach/discovery-web-sdk) directly for
- full control over API calls.
-2. **React Hooks**: Utilize custom React hooks (e.g., `useSearch`) for pre-built state management
- solutions.
-3. **Context-Aware Hooks**: Use hooks like `useSearchBox` to interact with the library's context
- system.
-4. **Headless Components**: Implement accessible, unstyled components (e.g., ``) for a
- balance of functionality and customization.
-5. **Styled Components** (Coming Soon): Include an optional styling bundle for a complete
- out-of-the-box experience.
-
### Components and Hooks
Each major feature in Limitless UI React is represented by a component and corresponding hooks. This
@@ -115,7 +112,7 @@ import { SearchBox } from '@bloomreach/limitless-ui-react';
const SearchPage = () => {
return (
- {
searchType="product"
labels={{
placeholder: "Search products...",
- submit: "Search",
+ submit: "Search",
reset: "Clear"
}}
>
@@ -219,7 +216,7 @@ const SearchPage = () => {
// Handle query selection
}}
onSearchSelect={(product, event) => {
- // Handle product selection
+ // Handle product selection
}}
/>
@@ -228,15 +225,10 @@ const SearchPage = () => {
};
```
-### Using Components + Style bundle (WIP)
-
-The headless components can be combined with the optional style bundle to get a full
-'out-of-the-box' experience.
-
-## Storybook
+### Using Components + Style bundle
-For more information for all available components, hooks, and their props, please
-refer to our [Storybook documentation](https://bloomreach.github.io/limitless-ui-react/).
+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.