Module

React.Basic.Hooks

Package: purescript-react-basic-hooks
Repository: spicydonuts/purescript-react-basic-hooks

This is an experimental implementation of React hooks on react-basic.

Warning: This API is experimental and relies on alpha-release React versions. It's here to allow experimentation while we get feedback on the API and wait for an official React release which supports hooks. For more info on hooks, see React's documentation.

It's also recommended while using this module to use PureScript's new "qualified do" syntax (it's used in the examples, React.do). It's available in the 0.12.2 release.

If we prefer this API over the existing react-basic API, we may eventually replace it with this.

A note on Refs: The Ref type is useful for passing to DOM nodes, but while this module remains a small extension to the existing react-basic library it won't be possible to pass a ref prop to the native DOM components. In the meantime, use element (unsafeCreateDOMComponent "div") { ref: elementRef }.

#CreateComponent Source

type CreateComponent props = Effect (ReactComponent props)

Alias for convenience.

#component Source

component :: forall props hooks. 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 Source

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

#UseState Source

data UseState :: Type -> Type -> Type

#useState Source

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

#UseEffect Source

data UseEffect :: Type -> Type -> Type

#useEffect Source

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

#UseLayoutEffect Source

data UseLayoutEffect :: Type -> Type -> Type

#useLayoutEffect Source

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

#UseReducer Source

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

#useReducer Source

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

#UseRef Source

data UseRef :: Type -> Type -> Type

#Ref Source

data Ref :: Type -> Type

#readRef Source

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

#readRefMaybe Source

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

#writeRef Source

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

#renderRef Source

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

#renderRefMaybe Source

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

#useRef Source

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

#UseContext Source

data UseContext :: Type -> Type -> Type

#Context Source

data Context :: Type -> Type

#useContext Source

useContext :: forall a. Context a -> Hook (UseContext a) (Maybe a)

#createContext Source

createContext :: forall a. Effect (Context a)

#contextProvider Source

contextProvider :: forall a. Context a -> a -> JSX -> JSX

#UseMemo Source

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

#useMemo Source

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

#UseCallback Source

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

#useCallback Source

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

#UseEqCache Source

data UseEqCache :: Type -> Type -> Type

#useEqCache Source

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

#UnsafeReference Source

newtype UnsafeReference a

Constructors

UnsafeReference a

Instances

Newtype (UnsafeReference a) _
Eq (UnsafeReference a)

#Render Source

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)

#Pure Source

type Pure a = forall hooks. Render hooks hooks a

#Hook Source

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

#bind Source

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 Source

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 Source

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

Re-exports from Data.Tuple

#Tuple Source

data Tuple a b

A simple product type for wrapping a pair of component values.

Constructors

Tuple a b

Instances

(Show a, Show b) => Show (Tuple a b)
Allows Tuples to be rendered as a string with show whenever there are Show instances for both component types.
(Eq a, Eq b) => Eq (Tuple a b)
Allows Tuples to be checked for equality with == and /= whenever there are Eq instances for both component types.
(Eq a) => Eq1 (Tuple a)
(Ord a, Ord b) => Ord (Tuple a b)
Allows Tuples to be compared with compare, >, >=, < and <= whenever there are Ord instances for both component types. To obtain the result, the fsts are compared, and if they are EQual, the snds are compared.
(Ord a) => Ord1 (Tuple a)
(Bounded a, Bounded b) => Bounded (Tuple a b)
Semigroupoid Tuple
(Semigroup a, Semigroup b) => Semigroup (Tuple a b)
The Semigroup instance enables use of the associative operator <> on Tuples whenever there are Semigroup instances for the component types. The <> operator is applied pairwise, so:
```
(Tuple a1 b1) <> (Tuple a2 b2) = Tuple (a1 <> a2) (b1 <> b2)
```
(Monoid a, Monoid b) => Monoid (Tuple a b)
(Semiring a, Semiring b) => Semiring (Tuple a b)
(Ring a, Ring b) => Ring (Tuple a b)
(CommutativeRing a, CommutativeRing b) => CommutativeRing (Tuple a b)
(HeytingAlgebra a, HeytingAlgebra b) => HeytingAlgebra (Tuple a b)
(BooleanAlgebra a, BooleanAlgebra b) => BooleanAlgebra (Tuple a b)
Functor (Tuple a)
The Functor instance allows functions to transform the contents of a Tuple with the <$> operator, applying the function to the second component, so:
```
f <$> (Tuple x y) = Tuple x (f y)
```
FunctorWithIndex Unit (Tuple a)
Invariant (Tuple a)
Bifunctor Tuple
(Semigroup a) => Apply (Tuple a)
The Functor instance allows functions to transform the contents of a Tuple with the <*> operator whenever there is a Semigroup instance for the fst component, so:
```
(Tuple a1 f) <*> (Tuple a2 x) == Tuple (a1 <> a2) (f x)
```
Biapply Tuple
(Monoid a) => Applicative (Tuple a)
Biapplicative Tuple
(Semigroup a) => Bind (Tuple a)
(Monoid a) => Monad (Tuple a)
Extend (Tuple a)
Comonad (Tuple a)
(Lazy a, Lazy b) => Lazy (Tuple a b)
Foldable (Tuple a)
Foldable1 (Tuple a)
FoldableWithIndex Unit (Tuple a)
Bifoldable Tuple
Traversable (Tuple a)
Traversable1 (Tuple a)
TraversableWithIndex Unit (Tuple a)
Bitraversable Tuple
(TypeEquals a Unit) => Distributive (Tuple a)

Re-exports from Data.Tuple.Nested

#tuple2 Source

tuple2 :: forall b a. a -> b -> Tuple2 a b

Given 2 values, creates a 2-tuple.

#(/\) Source

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)))

Re-exports from React.Basic

#ReactComponent Source

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

#JSX Source

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

#keyed Source

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 Source

fragment :: Array JSX -> JSX

Render an Array of children without a wrapping component.

See also: JSX

#empty Source

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 Source

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 Source

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

Modules: React.Basic.Hooks; React.Basic.Hooks.Aff; React.Basic.Hooks.ResetToken