React

Documentation

data Color

24-bit colors which can be interpolated.

Constructors

Color Int Int Int

Instances

Show Color

Animatable Color

getAnimationState :: Monad m => ReactT ty m (AnimationState ty)

class Animatable a where

Properties that can animate.

Numeric values like width and height, as well as colors.

Methods

interpolate

Arguments

:: Easing

easing function

-> a

from

-> a

to

-> Double

0..1

ratio of time elapsed

-> a

Use an easing function to interpolate between two values

animAdd :: a -> a -> a

Add two animations

animSub :: a -> a -> a

Subtract two animations

animZero :: a

Instances

Animatable Double

Animatable ()

Animatable Color

(Animatable a, Animatable b) => Animatable (a, b)

(Animatable a, Animatable b, Animatable c) => Animatable (a, b, c)

data ReactClass ty

A ReactClass is a standalone component of a user interface which contains the state necessary to render and animate itself. Classes are a tool for scoping.

Use createClass to construct.

createClass

Arguments

:: (ClassState ty -> React ty ())

render function

-> (ClassState ty -> Signal ty -> (ClassState ty, [AnimConfig ty]))

transition function

-> ClassState ty

initial state

-> AnimationState ty

initial animation state

-> [Signal ty]

-> IO (ReactClass ty)

ReactClass smart contstructor.

locally :: Monad m => Narrowing general local -> ReactT local m x -> ReactT general m x

data Narrowing general local

Constructors

Narrowing

Fields

localizeAnimationState :: AnimationState general -> AnimationState local

generalizeSignal :: Signal local -> Signal general

cancelRender :: RenderHandle -> IO ()

render :: Elem -> ReactClass ty -> IO RenderHandle

newtype ReactT ty m a

Constructors

ReactT

Fields

runReactT :: AnimationState ty -> m ([ReactNode (Signal ty)], a)

Instances

Monad m => Monad (ReactT ty m)

Monad m => Functor (ReactT ty m)

Monad m => Applicative (ReactT ty m)

(Monad m, (~) * a ()) => IsString (ReactT ty m a)

(Monad m, Monoid a) => Monoid (ReactT ty m a)

type React ty = ReactT ty Identity

class ReactKey ty

A ReactKey is a type, which conventionally has no constructors, mapping to the type of state, animation state, and signals associated with a page fragment or class.

Example:

data Slider -- note the key has no constructors
data SliderState = Open | Closed
data SliderSignal = SlideOpen | SlideClosed

instance ReactKey Slider where
    type ClassState Slider = SliderState
    type AnimationState Slider = Double
    type Signal Slider = SliderSignal

-- this page fragment has access to the animation state Double and can
-- emit SliderSignals.
pageFragment :: React Slider ()
pageFragment = div_ ...

-- this class stores the class state and animation state. its internals
-- can emit SliderSignals.
sliderClass :: ReactClass Slider ()
sliderClass = ...

Associated Types

type ClassState ty :: *

The state needed to render a class (ignoring animation)

type AnimationState ty :: *

The state needed to animate a class

type Signal ty :: *

The type of signals a class can send

Instances

ReactKey ()

newtype RenderHandle

Constructors

RenderHandle Int

Instances

Unpack RenderHandle

Pack RenderHandle

data AnimConfig ty

Constructors

forall a . Animatable a => AnimConfig

Fields

duration :: Double

How long this animation lasts in milliseconds

endpoints :: (a, a)

Where does this animation start and end?

lens :: Traversal' (AnimationState ty) a

Pointer to this field within AnimationState

easing :: Easing

How is the animation eased?

onComplete :: Bool -> Maybe (Signal ty)

Do something when it's finished?

data Easing

Standard easing functions. These are used to interpolate smoothly.

See here for visualizations.

Constructors

Linear

EaseInQuad

EaseOutQuad

EaseInOutQuad

EaseInCubic

EaseOutCubic

EaseInOutCubic

EaseInQuart

EaseOutQuart

EaseInOutQuart

EaseInQuint

EaseOutQuint

EaseInOutQuint

EaseInElastic

EaseOutElastic

EaseInOutElastic

EaseInBounce

EaseOutBounce

EaseInOutBounce

EaseBezier Double Double Double Double

EaseInSine

EaseOutSine

Instances

Eq Easing

Ord Easing

Show Easing

data EventProperties e

Low level properties common to all events

Constructors

EventProperties

Fields

bubbles :: !Bool

cancelable :: !Bool

currentTarget :: !e

defaultPrevented :: !Bool

eventPhase :: !Int

isTrusted :: !Bool

evtTarget :: !e

eventType :: !JSString

Instances

NFData e => NFData (EventProperties e)

data ModifierKeys

Constructors

ModifierKeys

Fields

altKey :: !Bool

ctrlKey :: !Bool

metaKey :: !Bool

shiftKey :: !Bool

Instances

Eq ModifierKeys

Show ModifierKeys

NFData ModifierKeys

data MouseEvent

Constructors

MouseEvent

Fields

mouseModifierKeys :: !ModifierKeys

buttonNum :: !Int

clientX :: !Double

clientY :: !Double

pageX :: !Double

pageY :: !Double

screenX :: !Double

screenY :: !Double

Instances

Show MouseEvent

NFData MouseEvent

data KeyboardEvent

Constructors

KeyboardEvent

Fields

keyboardModifierKeys :: !ModifierKeys

charCode :: !Int

key :: !JSString

keyCode :: !Int

locale :: !JSString

location :: !Int

repeat :: !Bool

which :: !Int

Instances

Show KeyboardEvent

NFData KeyboardEvent

newtype ChangeEvent

Constructors

ChangeEvent

Fields

targetValue :: JSString

Instances

Show ChangeEvent

NFData ChangeEvent

data FocusEvent e

Constructors

FocusEvent

Fields

domEventTarget :: !e

relatedTarget :: !e

Instances

NFData e => NFData (FocusEvent e)