3.0.0 • Published 3 years ago
@agderposten/header v3.0.0
Header
Installation
npm install @agderposten/header
Usage
import React, {Fragment} from 'react';
import Header, {stylesheet} from '@agderposten/header';
export default () => (
<Fragment>
<Header {...{organization}} />
<style dangerouslySetInnerHTML={{__html: stylesheet}} />
</Fragment>
);
Properties
The header
component can be customized by passing these properties to it:
className
(String)
Given to the topmost header
element. You'd probably want to apply fixed positioning here.
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
<Header {...{organization}} className={classNames.header} />
wrapperClassName
(String)
Given to the wrapper inside the topmost header
element. You'd probably want to override its max-width
to fit your page layout.
.wrapper {
max-width: 800px;
}
<Header {...{organization}} wrapperClassName={classNames.wrapper} />
logoClassName
(String)
Given to either the logo image or logo anchor link depending on whether or not you provide a logoLinkHref
. You'd probably want to set margin-left
to align the logo to the left if you have other children
inside the header.
.logo {
margin-left: 0;
}
<Header {...{organization}} logoClassName={classNames.logo} />
logoLinkHref
(String)
A destination URL for when clicking the logo.
<Header {...{organization}} logoLinkHref="http://google.no" />
<Header {...{organization}} logoLinkHref={organization.urls.home} />
children
The header
component takes children.
<Header {...{organization}}>
<p>Hello there</p>
</Header>