The Wordmap is a tool that enhances vocabulary learning through visual organization, and is a shared module that can be utilized on both Membean and Memseed.
yarn add 'wordmap@https://github.com/membean/wordmap.git#v0.0.8'
npm install 'wordmap@https://github.com/membean/wordmap.git#v0.0.8'
Note: you must have access to Wordmap repository in order to install it as node package / module.
- Create container element
import React, {useRef} from 'react';
...
...
function App() {
const containerRef = useRef();
...
...
...
return (
<>
<div className="container" ref={containerRef}></div>
</>
)
...
}
- Import the Wordmap Module.
import Wordmap from 'wordmap';
- Call the
Wordmapconstructor with input containerElement & json data url.
...
...
useEffect(() => {
new WordMap(
{
containerEle: containerRef.current,
url: WORD_URL // url to be set from env.
}
)
return () => {
containerRef.current.removeChild(containerRef.current.children[ 0 ])
}
}, [])
...
...
- Style the container with equal width and height so the constellation graph render correctly.
.container {
width: 350px;
height: 350px;
background: #2a383d;
padding: 20px;
}
- Import the
wordmap/bundle.jsin index.html
//index.html
<script src="wordmap/bundle.js" type="module"/>
OR
//index.html
<script src="./node_modules/wordmap/bundle.js" type="module"/>
- Create container element
///index.html
<body>
..
..
<div class="container"></div>
</body>
- Create js script to call
Wordmapconstructor and load in index.html.
// app.js
window.addEventListener('load', () => {
const containerRef = document.querySelector(".container");
new window.Wordmap({
containerEl: containerRef,
url: WORD_URL // to be loaded from env or the url to wordmap.
})
})
// index.html
<body>
...
...
<script src="./app.js" />
</body>
- Style the container with equal width and height so the constellation graph render correctly.
.container {
width: 350px;
height: 350px;
}
The configuration is used to change how the Wordmap behaves. There are properties to load the word map in Interactive and NonInteractive mode.
- configure wordmap to render constellation with word at center, just static constellation no drilldown to another word. means click on label will be disable.
new Wordmap({
containerEle: ele,
mode: 'word',
url: 'url-to-constellation-json-data'
})- configure wordmap to render constellation with
?at center, static constellation with no interaction mostly use in questions page.
new Wordmap({
containerEle: ele,
mode: 'question',
url: 'url-to-constellation-json-data'
})- configure wordmap to render constellation with
wordat center and to make wordmap more interactive. You have to write logic to maintain the state to enable the forward and backword mode.
mostly use in word page.
new Wordmap({
containerEle: ele,
mode: 'question',
data: jsonData,
fetchCallback: callBack // invoke when user click on labels.
})| Property | Type | Type | Description |
|---|---|---|---|
| containerEle | Object | Required | A reference to the wordmap container div from the constellation component |
| mode | string | options | Used to determine the constellation mode, default is 'word' |
| animate | Boolean | optional | Used to turn animation on or off, default is On |
| url | string | Required / Optional | Used to fetch the constellation data, [required] when constellation need to load in readonly mode like questions. [optional] when constellation needs to be interactive, eg to enable click on label |
| data | Object | Required | Json data to render the constellation graph, [required] In case of interactive mode. |
| fetchCallBack | function | Required | A callback fn to fetch the constellation data based on provided word, on invoke it has two params, 1. word, 2. cb to render graph with updated data [Required] in case of interactive mode. |
| props | Object | Optional | Props for constellation component, default is {} e.g. fullscreen: true/false |
To prepare the types of module just execute the below commands from root.
yarn tsc
To prepare the compiled minified version as single file so browser can easily use it.
yarn webpack