Arwes

Arwes application container. This component should wrap the application components. It can have a background image and a pattern image between the background and the content. It uses <Puffs /> component to display an animation between the children and the background.

<Arwes
    animate
    pattern='/static/img/glow.png'
    background={{
        small: '/static/img/small.jpg',
        medium: '/static/img/medium.jpg',
        large: '/static/img/large.jpg',
        xlarge: '/static/img/xlarge.jpg'
    }}
>
    <p>Application elements</p>
</Arwes>

The component is fixed positioned in the page so there should be only one.

The component also apply default styles to common HTML tags so it prevents global styles pollution.

Prop name	Type	Default	Description
Animation	any	`AnimationComponent`
Puffs	any	`PuffsComponent`
createResponsive	any	`createResponsiveModule`
createLoader	any	`createLoaderModule`
theme	any	Required
classes	any	Required
animate	bool
show	bool	`true`
animation	object
background	union		Background image resources. One of type: `string`, `shape`
pattern	union		Pattern image resources. One of type: `string`, `shape`
loadResources	bool	`true`	If the component should load the resources.
showResources	bool	`true`	If to show the resources when they are loaded.
puffsProps	object		Properties to pass down to `<Puffs />` component.
children	any		If function, receives the animation status object.

Method name	Parameters	Description
getActiveResources		Get active resources from resources props. Returns `Object`
loadResources		Load active resources if they can be loaded. Doesn’t return the state, it only loads the data.

Source code: src/Arwes Open in: Playground