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. Creating components is effectful because React uses the function instance as the component's "identity" or "type".
#memo Source
memo :: forall props. CreateComponent props -> CreateComponent props
#UseLayoutEffect Source
data UseLayoutEffect :: Type -> Type
#useLayoutEffect Source
useLayoutEffect :: Array Key -> Effect (Effect Unit) -> Hook UseLayoutEffect Unit
#useReducer Source
useReducer :: forall action state. ToKey state => state -> (state -> action -> state) -> Hook (UseReducer state action) (Tuple state (action -> Effect Unit))
#useContext Source
useContext :: forall a. Context a -> Hook (UseContext a) (Maybe a)
#createContext Source
createContext :: forall a. a -> Effect (Context a)
#Key Source
data Key
Keys represent values React uses to check for changes.
This is done using JavaScript's reference equality (===
),
so complicated types may want to implement ToKey
so that
it returns a primative like a String
. A timestamp appended
to a unique ID, for example. Less strict cases can implement
ToKey
using unsafeToKey
, while some extreme cases may
need a hashing or stringifying mechanism.
#unsafeToKey Source
unsafeToKey :: forall a. a -> Key
#pure Source
pure :: forall m x a. IxApplicative m => a -> m x x a
#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)
(Eq a, Eq b) => Eq (Tuple a b)
(Eq a) => Eq1 (Tuple a)
(Ord a, Ord b) => Ord (Tuple a b)
(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<>
onTuple
s whenever there areSemigroup
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)
FunctorWithIndex Unit (Tuple a)
Invariant (Tuple a)
Bifunctor Tuple
(Semigroup a) => Apply (Tuple a)
The
Functor
instance allows functions to transform the contents of aTuple
with the<*>
operator whenever there is aSemigroup
instance for thefst
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
#(/\) 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 usingReact.Fragment
.
- Merge two
mempty
- The
empty
node; renders nothing.
- The
Hint: Many useful utility functions already exist for Monoids. For example,
guard
can be used to conditionally render a subtree of components.
Instances
#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
- Modules
- React.
Basic. Hooks
Allows
Tuple
s to be rendered as a string withshow
whenever there areShow
instances for both component types.