Header

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

• Import

  import { Header } 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
childrenComponent	ElementType	div	Type of element for the children container
hasSearch	boolean	true	Display the search button and search bar
withBorder	boolean	true	Display a border on the Header
height	number	90	Height of Header
left	ReactNode	-	Left section
right	ReactNode	-	Right section
searchAriaLabel	string	"Search"	Aria label of search button
searchTheme	MantineThemeOverride	-	Mantine theme of search bar
searchValue	string	-	Controlled value of search bar input
onSearchChange	(value: string) => void	-	Called when value of search bar input changes
onSearchSubmit	(event: FormEvent) => void	-	Called when search bar input is submitted
hasResponsiveMode	boolean	-	Control the type of display to show
mobileProps	IHeaderMobileProps	-	Allows configuring the props of the child component HeaderMobile
...	-	-	extends Mantine's HeaderProps