Skip to content

Commit d66c9a3

Browse files
pete-murphypete-murphy
committed
Add ComponentsReactHooks
1 parent 1ee8da0 commit d66c9a3

File tree

6 files changed

+119
-0
lines changed

6 files changed

+119
-0
lines changed

‎recipes/ComponentsReactHooks/.gitignore

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*
10+
/.spago
11+
/.cache/
12+
/dist/
13+
/web-dist/
14+
/prod-dist/
15+
/prod/

‎recipes/ComponentsReactHooks/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# ComponentsReactHooks
2+
3+
Demonstrates how to nest one React Hooks-based component inside another and send props from the parent to the child component.
4+
5+
## Expected Behavior:
6+
7+
### Browser
8+
9+
Clicking the "On/Off" button in the child will toggle the button's label and update the parent component's toggle count. If the user clicks the "Check now" button in the parent, the parent will update its cache of the button state.
10+
11+
## Dependencies Used:
12+
13+
[react](https://www.npmjs.com/package/react)
14+
[react-dom](https://www.npmjs.com/package/react-dom)

‎recipes/ComponentsReactHooks/spago.dhall

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{ name = "ComponentsReactHooks"
2+
, dependencies =
3+
[ "console"
4+
, "effect"
5+
, "psci-support"
6+
, "react-basic-hooks"
7+
, "react-basic-dom"
8+
]
9+
, packages = ../../packages.dhall
10+
, sources = [ "recipes/ComponentsReactHooks/src/**/*.purs" ]
11+
}

‎recipes/ComponentsReactHooks/src/Main.purs

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
module ComponentsReactHooks.Main where
2+
3+
import Prelude
4+
import Data.Maybe (Maybe(..), maybe)
5+
import Effect (Effect)
6+
import Effect.Exception (throw)
7+
import React.Basic.DOM (render)
8+
import React.Basic.DOM as R
9+
import React.Basic.Events (EventHandler, handler_)
10+
import React.Basic.Hooks (Component, component, useState, (/\))
11+
import React.Basic.Hooks as React
12+
import Web.HTML (window)
13+
import Web.HTML.HTMLDocument (body)
14+
import Web.HTML.HTMLElement (toElement)
15+
import Web.HTML.Window (document)
16+
17+
main :: Effect Unit
18+
main = do
19+
body <- body =<< document =<< window
20+
case body of
21+
Nothing -> throw "Could not find body."
22+
Just b -> do
23+
container <- mkContainer
24+
render (container unit) (toElement b)
25+
26+
mkContainer :: Component Unit
27+
mkContainer = do
28+
button <- mkButton
29+
component "Container" \_ -> React.do
30+
count /\ setCount <- useState 0
31+
enabled /\ setEnabled <- useState false
32+
buttonState /\ setButtonState <- useState Nothing
33+
let
34+
handleClick =
35+
handler_ do
36+
setCount (_ + 1)
37+
setEnabled not
38+
pure
39+
$ R.div_
40+
[ button { enabled, handleClick }
41+
, R.p_
42+
[ R.text ("Button has been toggled " <> show count <> " time(s)") ]
43+
, R.p_
44+
[ R.text
45+
$ "Last time I checked, the button was: "
46+
<> (maybe "(not checked yet)" (if _ then "on" else "off") buttonState)
47+
<> ". "
48+
, R.button
49+
{ onClick: handler_ (setButtonState \_ -> Just enabled)
50+
, children: [ R.text "Check now" ]
51+
}
52+
]
53+
]
54+
55+
mkButton :: Component { enabled :: Boolean, handleClick :: EventHandler }
56+
mkButton =
57+
component "Button" \props -> React.do
58+
let
59+
label = if props.enabled then "On" else "Off"
60+
pure
61+
$ R.button
62+
{ title: label
63+
, onClick: props.handleClick
64+
, children: [ R.text label ]
65+
}

‎recipes/ComponentsReactHooks/web/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>ComponentsReactHooks</title>
6+
</head>
7+
8+
<body>
9+
<div id="root"></div>
10+
<script src="./index.js"></script>
11+
</body>
12+
</html>

‎recipes/ComponentsReactHooks/web/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
"use strict";
2+
require("../../../output/ComponentsReactHooks.Main/index.js").main();

0 commit comments

Comments
 (0)