Events

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

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

Component()
    .onClick( (c) => c
        .rotate()
    )

Interaction Events

• onLoad( (c) => c )
• onClick( (c) => c )
• onChange( (c) => c )
• onHover( (c) => c, (c) => c ) - Callbacks for the mouse entering and leaving
• onFocus( (c) => c )
• onBlur( (c) => c )
• onDoubleClick( (c) => c )
• onError( (c) => c )
• onKeypress( (c) => c ) - 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( (c) => c )
• onDeviceMedium( (c) => c )
• onDeviceLarge( (c) => c )

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.

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