Header Mobile

Render an application header with optional left section, right section, content and search button/bar for mobile display

• Import

  import { HeaderMobile } from '@smile/haring-react';
• Extends AppShell (Header)
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
children	ReactNode	-	Main content of header
height	number	90	Height of Header
left	ReactNode	-	Left section
right	ReactNode	-	Right section
searchValue	string	-	Controlled value of search bar input
onSearchChange	(value: string) => void	-	Callback function that returns the value of the field as soon as it changes
onSearchSubmit	(event: FormEvent) => void	-	Called when search bar input is submitted
searchInputProps	Omit<TextInputProps, 'onChange' | 'value'>	-	Allows configuring the props of the child component TextInput
WithBorder	boolean	false	Display or not a border on the Header
hasSearch	boolean	true	Control the display of the search bar
burgerProps	Omit<BurgerProps, "onClick" | "opened">	-	Allows configuring the props of the child component Burger
collapseProps	Omit<CollapseProps, "in">	-	Allows configuring the props of the child component Collapse
...	-	-	extends Mantine's HeaderProps