Skip to content

Commit 1644a08

Browse files
pete-murphypete-murphy
committed
Add ComponentsInputReactHooks
1 parent d66c9a3 commit 1644a08

File tree

6 files changed

+111
-0
lines changed

6 files changed

+111
-0
lines changed

‎recipes/ComponentsInputReactHooks/.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/ComponentsInputReactHooks/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# ComponentsInputReactHooks
2+
3+
Each time the parent's state updates, it will pass a new prop value into the child, and the child will update accordingly.
4+
5+
## Expected Behavior:
6+
7+
### Browser
8+
9+
The parent stores an `Int` as state. Clicking the buttons will increment/decrement that value. The children will display the result of a mathematical computation using that value.
10+
11+
## Dependencies Used:
12+
13+
[react](https://www.npmjs.com/package/react)
14+
[react-dom](https://www.npmjs.com/package/react-dom)

‎recipes/ComponentsInputReactHooks/spago.dhall

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{ name = "ComponentsInputReactHooks"
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/ComponentsInputReactHooks/src/**/*.purs" ]
11+
}

‎recipes/ComponentsInputReactHooks/src/Main.purs

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
module ComponentsInputReactHooks.Main where
2+
3+
import Prelude
4+
import Data.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 (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+
display <- mkDisplay
29+
component "Container" \_ -> React.do
30+
state /\ setState <- useState 0
31+
pure
32+
$ R.div_
33+
[ R.ul_
34+
[ display state
35+
, display (state * 2)
36+
, display (state * 3)
37+
, display (state * 10)
38+
, display (state * state)
39+
]
40+
, R.button
41+
{ onClick: handler_ (setState (_ + 1))
42+
, children: [ R.text "+1" ]
43+
}
44+
, R.button
45+
{ onClick: handler_ (setState (_ - 1))
46+
, children: [ R.text "-1" ]
47+
}
48+
]
49+
50+
mkDisplay :: Component Int
51+
mkDisplay =
52+
component "Display" \n ->
53+
pure
54+
$ R.div_
55+
[ R.text "My input value is: "
56+
, R.strong_ [ R.text (show n) ]
57+
]

‎recipes/ComponentsInputReactHooks/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>ComponentsInputReactHooks</title>
6+
</head>
7+
8+
<body>
9+
<div id="root"></div>
10+
<script src="./index.js"></script>
11+
</body>
12+
</html>

‎recipes/ComponentsInputReactHooks/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/ComponentsInputReactHooks.Main/index.js").main();

0 commit comments

Comments
 (0)