Skip to content

Commit d5d5e05

Browse files
pete-murphypete-murphy
authored
Add ShapesReactHooks example (#241)
1 parent e10fad7 commit d5d5e05

File tree

7 files changed

+135
-0
lines changed

7 files changed

+135
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ Running a web-compatible recipe:
138138
| | :heavy_check_mark: | [RoutingHashLog](recipes/RoutingHashLog) | This recipe demonstrates hash-based routing with `purescript-routing`. No web framework is used. |
139139
| | :heavy_check_mark: | [RoutingPushHalogenClassic](recipes/RoutingPushHalogenClassic) | This recipe shows how to use `purescript-routing` to do client-side push-state routing in a Halogen-based single-page application (SPA). |
140140
| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ShapesHalogenHooks/src/Main.purs)) | [ShapesHalogenHooks](recipes/ShapesHalogenHooks) | Demonstrates rendering of SVG shapes. |
141+
| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ShapesReactHooks/src/Main.purs)) | [ShapesReactHooks](recipes/ShapesReactHooks) | Demonstrates rendering of SVG shapes. |
141142
| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/SignalRenderJs/src/Main.purs)) | [SignalRenderJs](recipes/SignalRenderJs) | [Signal](https://pursuit.purescript.org/packages/purescript-signal/10.1.0) demo that responds to user input and elapsed time. |
142143
| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/SignalSnakeJs/src/Main.purs)) | [SignalSnakeJs](recipes/SignalSnakeJs) | A snake game built using [Signal](https://pursuit.purescript.org/packages/purescript-signal/10.1.0). |
143144
| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/SignalTrisJs/src/Main.purs)) | [SignalTrisJs](recipes/SignalTrisJs) | A [tetromino](https://en.wikipedia.org/wiki/Tetromino) game built using [Signal](https://pursuit.purescript.org/packages/purescript-signal/10.1.0). |

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# ShapesReactHooks
2+
3+
Demonstrates rendering of SVG shapes.
4+
5+
A React port of the ["Shapes" Elm Example](https://elm-lang.org/examples/shapes).
6+
7+
## Expected Behavior
8+
9+
### Browser
10+
11+
The browser will display a variety of colorful SVG shapes and text reading "Welcome to Shapes Club"
12+
13+
## Dependencies used
14+
15+
[react](https://www.npmjs.com/package/react)
16+
[react-dom](https://www.npmjs.com/package/react-dom)

‎recipes/ShapesReactHooks/spago.dhall‎

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

‎recipes/ShapesReactHooks/src/Main.purs‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
module ShapesReactHooks.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, text)
8+
import React.Basic.DOM.SVG as R
9+
import React.Basic.Hooks (Component, component)
10+
import Web.HTML (window)
11+
import Web.HTML.HTMLDocument (body)
12+
import Web.HTML.HTMLElement (toElement)
13+
import Web.HTML.Window (document)
14+
15+
main :: Effect Unit
16+
main = do
17+
body <- body =<< document =<< window
18+
case body of
19+
Nothing -> throw "Could not find body."
20+
Just b -> do
21+
shapesComponent <- mkShapesComponent
22+
render (shapesComponent unit) (toElement b)
23+
24+
mkShapesComponent :: Component Unit
25+
mkShapesComponent = do
26+
component "ShapesComponent" \_ -> React.do
27+
pure
28+
$ R.svg
29+
{ viewBox: "0 0 400 400"
30+
, width: "400"
31+
, height: "400"
32+
, children:
33+
[ R.circle
34+
{ cx: "50"
35+
, cy: "50"
36+
, r: "40"
37+
, fill: "red"
38+
, stroke: "black"
39+
, strokeWidth: "3"
40+
}
41+
, R.rect
42+
{ x: "100"
43+
, y: "10"
44+
, width: "40"
45+
, height: "40"
46+
, fill: "green"
47+
, stroke: "black"
48+
, strokeWidth: "2"
49+
}
50+
, R.line
51+
{ x1: "20"
52+
, y1: "200"
53+
, x2: "200"
54+
, y2: "20"
55+
, stroke: "blue"
56+
, strokeWidth: "10"
57+
, strokeLinecap: "round"
58+
}
59+
, R.polyline
60+
{ points: "200,40 240,40 240,80 280,80 280,120 320,120 320,160"
61+
, fill: "none"
62+
, stroke: "red"
63+
, strokeWidth: "4"
64+
, strokeDasharray: "20,2"
65+
}
66+
, R.text
67+
{ x: "130"
68+
, y: "130"
69+
, fill: "black"
70+
, textAnchor: "middle"
71+
, dominantBaseline: "central"
72+
, transform: "rotate(-45 130,130)"
73+
, children:
74+
[ text "Welcome to Shapes Club"
75+
]
76+
}
77+
]
78+
}

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

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

0 commit comments

Comments
 (0)