Events

Events are on all elements and allow you to trigger something when an event occurs for the element.

The returned e is the element, meaning you can chain methods to this element that will be triggered when the event fires.

Element()
    .onClick( (e) => e
        .rotate()
    )

Interaction Events

• onLoad( (e) => e )
• onClick( (e) => e )
• onChange( (e) => e )
• onHover( (e) => e, (e) => e ) - Callbacks for the mouse entering and leaving
• onFocus( (e) => e )
• onBlur( (e) => e )
• onDoubleClick( (e) => e )
• onError( (e) => e )
• onKeypress( (e) => e ) - Meant for use with the TextInput(), TextBox(), etc.

Screen Size Events

These events are triggered by screen size changes using standard screen size ratios.

• onDeviceSmall( (e) => e )
• onDeviceMedium( (e) => e )
• onDeviceLarge( (e) => e )

State Selectors

You can apply effects like :hover, :active, and :focus using the helper methods. This can be chained along with methods that define the initial style.

globalStyle('input, textarea')
    .border('gray','2px')
    .hover((e) => e
        .borderColor('darkgray)
    )
    .rounded('5px');