React.Basic.Hooks

type CreateComponent props = Effect (ReactComponent props)

Alias for convenience.

component :: forall props hooks. Lacks "key" props => Lacks "ref" props => String -> (Record props -> Render Unit hooks JSX) -> CreateComponent (Record props)

Create a React component given a display name and render function. Creating components is effectful because React uses the function instance as the component's "identity" or "type". Components should be created during a bootstrap phase and not within component lifecycles or render functions.

memo :: forall props. CreateComponent props -> CreateComponent props

data UseState :: Type -> Type -> Type

useState :: forall state. state -> Hook (UseState state) (state /\ ((state -> state) -> Effect Unit))

data UseEffect :: Type -> Type -> Type

useEffect :: forall key. Eq key => key -> Effect (Effect Unit) -> Hook (UseEffect key) Unit

The effect will be run when the component is mounted, and the effect returned from the function will be run on cleanup

data UseLayoutEffect :: Type -> Type -> Type

useLayoutEffect :: forall key. Eq key => key -> Effect (Effect Unit) -> Hook (UseLayoutEffect key) Unit

data UseReducer :: Type -> Type -> Type -> Type

useReducer :: forall action state. state -> (state -> action -> state) -> Hook (UseReducer state action) (state /\ (action -> Effect Unit))

data UseRef :: Type -> Type -> Type

readRef :: forall a. Ref a -> Effect a

readRefMaybe :: forall a. Ref (Nullable a) -> Effect (Maybe a)

writeRef :: forall a. Ref a -> a -> Effect Unit

renderRef :: forall a. Ref a -> Pure a

renderRefMaybe :: forall a. Ref (Nullable a) -> Pure (Maybe a)

useRef :: forall a. a -> Hook (UseRef a) (Ref a)

data UseContext :: Type -> Type -> Type

useContext :: forall a. ReactContext a -> Hook (UseContext a) a

data UseMemo :: Type -> Type -> Type -> Type

useMemo :: forall a key. Eq key => key -> (Unit -> a) -> Hook (UseMemo key a) a

data UseCallback :: Type -> Type -> Type -> Type

useCallback :: forall a key. Eq key => key -> a -> Hook (UseCallback key a) a

data UseEqCache :: Type -> Type -> Type

useEqCache :: forall a. Eq a => a -> Hook (UseCallback a a) a

newtype UnsafeReference a

Constructors

• UnsafeReference a

Instances

• Newtype (UnsafeReference a) _
• Eq (UnsafeReference a)

newtype Render x y a

Render represents the effects allowed within a React component's body, i.e. during "render". This includes hooks and ends with returning JSX (see pure), but does not allow arbitrary side effects.

Instances

• IxFunctor Render
• IxApply Render
• IxApplicative Render
• IxBind Render
• Functor (Render x y)
• (TypeEquals x y) => Apply (Render x y)
• (TypeEquals x y) => Applicative (Render x y)
• (TypeEquals x y) => Bind (Render x y)
• (TypeEquals x y, Semigroup a) => Semigroup (Render x y a)
• (TypeEquals x y, Monoid a) => Monoid (Render x y a)

type Pure a = forall hooks. Render hooks hooks a

type Hook (newHook :: Type -> Type) a = forall hooks. Render hooks (newHook hooks) a

bind :: forall m z y x b a. IxBind m => m x y a -> (a -> m y z b) -> m x z b

Exported for use with qualified-do syntax

discard :: forall m z y x b a. IxBind m => m x y a -> (a -> m y z b) -> m x z b

Exported for use with qualified-do syntax

displayName :: forall props. ReactComponent props -> String

Retrieve the Display Name from a ReactComponent. Useful for debugging and improving error messages in logs.

See also: component

Operator alias for Data.Tuple.Tuple (right-associative / precedence 6)

Shorthand for constructing n-tuples as nested pairs. a /\ b /\ c /\ d /\ unit becomes Tuple a (Tuple b (Tuple c (Tuple d unit)))

Operator alias for Data.Tuple.Tuple (right-associative / precedence 6)

Shorthand for constructing n-tuple types as nested pairs. forall a b c d. a /\ b /\ c /\ d /\ Unit becomes forall a b c d. Tuple a (Tuple b (Tuple c (Tuple d Unit)))

data Ref :: Type -> Type

A React Ref, as created by React.createRef

data ReactContext :: Type -> Type

data ReactComponent :: Type -> Type

Represents a traditional React component. Useful for JavaScript interop and FFI. For example:

foreign import ComponentRequiringJSHacks :: ReactComponent { someProp :: String }

See also: element, toReactComponent

data JSX :: Type

Represents rendered React VDOM (the result of calling React.createElement in JavaScript).

JSX is a Monoid:

• append
  • Merge two JSX nodes using React.Fragment.
• mempty
  • The empty node; renders nothing.

Hint: Many useful utility functions already exist for Monoids. For example, guard can be used to conditionally render a subtree of components.

Instances

• Semigroup JSX
• Monoid JSX

provider :: forall a. ReactContext a -> a -> Array JSX -> JSX

Create a provider JSX given a context value and children.

See also: createContext, consumer

keyed :: String -> JSX -> JSX

Apply a React key to a subtree. React-Basic usually hides React's warning about using key props on components in an Array, but keys are still important for any dynamic lists of child components.

See also: React's documentation regarding the special key prop

fragment :: Array JSX -> JSX

Render an Array of children without a wrapping component.

See also: JSX

empty :: JSX

An empty JSX node. This is often useful when you would like to conditionally show something, but you don't want to (or can't) modify the children prop on the parent node.

See also: JSX, Monoid guard

elementKeyed :: forall props. ReactComponent (Record props) -> { key :: String | props } -> JSX

Create a JSX node from a ReactComponent, by providing the props and a key.

This function is for non-React-Basic React components, such as those imported from FFI.

See also: ReactComponent, element, React's documentation regarding the special key prop

element :: forall props. ReactComponent (Record props) -> Record props -> JSX

Create a JSX node from a ReactComponent, by providing the props.

This function is for non-React-Basic React components, such as those imported from FFI.

See also: ReactComponent, elementKeyed

createContext :: forall a. a -> Effect (ReactContext a)

Create a ReactContext given a default value. Use provider and consumer to provide and consume context values. Alternatively, use contextProvider and contextConsumer directly if a ReactComponent is required for interop.

render self =
  R.div_
  [ R.button
    { onClick: capture_ $ self.setState \s -> s { counter = s.counter + 1 }
    , children: [ R.text "Tick!" ]
    }
  , provider countContext self.state.counter
    [ consumer countContext \counter ->
       [ R.text $ "Ticks: " <> (show counter)
       ]
    ]
  ]

See also: provider, consumer, React's documentation regarding Context

contextProvider :: forall a. ReactContext a -> ReactComponent { children :: Array JSX, value :: a }

contextConsumer :: forall a. ReactContext a -> ReactComponent { children :: a -> Array JSX }

consumer :: forall a. ReactContext a -> (a -> Array JSX) -> JSX

Create a consumer JSX from a context value to children.

See also: createContext, producer