Skip to content

Commit 0eeca7d

Browse files
LTemliebelt
LTe
authored and
mliebelt
committed
Add example for ReactJS
1 parent 35ff808 commit 0eeca7d

1 file changed

Lines changed: 66 additions & 11 deletions

File tree

‎readme.md‎

Lines changed: 66 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@ Due to the fact that Webpack holds the assets under a given directory (in my cas
8585

8686
### Using the viewer
8787

88+
#### Standalone script
89+
8890
To use the viewer in an HTML page, you have to do the following steps:
8991

9092
* Include the necessary library `pgnv.js` and the corresponding resources `locales` and `pgnv-assets`.
@@ -94,17 +96,70 @@ To use the viewer in an HTML page, you have to do the following steps:
9496

9597
So a rough template will look like:
9698

97-
<!DOCTYPE html>
98-
<head>
99-
<script src="js/pgnv.js" type="text/javascript" ></script>
100-
</head>
101-
<body>
102-
<div id="board"></div>
103-
<script>
104-
PGNV.pgnView('board',{ pgn: '1. e4 e5 2. Nf3 Nc6 3. Bb5', pieceStyle: 'merida' });
105-
</script>
106-
</body>
107-
</html>
99+
```html
100+
<!DOCTYPE html>
101+
<head>
102+
<script src="js/pgnv.js" type="text/javascript" ></script>
103+
</head>
104+
<body>
105+
<div id="board"></div>
106+
<script>
107+
PGNV.pgnView('board',{ pgn: '1. e4 e5 2. Nf3 Nc6 3. Bb5', pieceStyle: 'merida' });
108+
</script>
109+
</body>
110+
</html>
111+
```
112+
113+
#### ReactJS
114+
115+
```jsx
116+
import React, {useLayoutEffect} from 'react'
117+
import Children from 'react-children-utilities'
118+
import * as uuid from 'uuid'
119+
import { pgnView } from '@mliebelt/pgn-viewer'
120+
121+
function PGNViewer(props) {
122+
const gameDecription = Children.onlyText(props.children)
123+
const id = 'board-' + uuid.v4()
124+
125+
useLayoutEffect(() => {
126+
pgnView(id,
127+
{
128+
pgn: gameDecription,
129+
timerTime: '1',
130+
locale: 'pl',
131+
startPlay: 1,
132+
showResult: true,
133+
boardSize: '340',
134+
showFen: true,
135+
pieceStyle: 'chesscom'
136+
}
137+
)
138+
})
139+
140+
return (
141+
<div id={id}></div>
142+
)
143+
}
144+
145+
// Usage
146+
147+
<PGNViewer>
148+
[Event "F/S Return Match"]
149+
[Site "Belgrade"]
150+
[Date "1992.11.04"]
151+
[Round "29"]
152+
[White "Fischer, Robert J."]
153+
[Black "Spassky, Boris V."]
154+
[Result "1/2-1/2"]
155+
156+
1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 4. Ba4 Nf6 5. O-O Be7 6. Re1 b5 7. Bb3 d6 8. c3 O-O 9. h3 Nb8 10. d4 Nbd7
157+
11. c4 c6 12. cxb5 axb5 13. Nc3 Bb7 14. Bg5 b4 15. Nb1 h6 16. Bh4 c5 17. dxe5 Nxe4 18. Bxe7 Qxe7 19. exd6 Qf6
158+
20. Nbd2 Nxd6 21. Nc4 Nxc4 22. Bxc4 Nb6 23. Ne5 Rae8 24. Bxf7+ Rxf7 25. Nxf7 Rxe1+ 26. Qxe1 Kxf7 27. Qe3 Qg5
159+
28. Qxg5 hxg5 29. b3 Ke6 30. a3 Kd6 31. axb4 cxb4 32. Ra5 Nd5 33. f3 Bc8 34. Kf2 Bf5 35. Ra7 g6 36. Ra6+ Kc5
160+
37. Ke1 Nf4 38. g3 Nxh3 39. Kd2 Kb5 40. Rd6 Kc5 41. Ra6 Nf2 42. g4 Bd3 43. Re6 1/2-1/2
161+
</PGNViewer>
162+
```
108163

109164
## Built With
110165

0 commit comments

Comments
 (0)