updated readme, fixed docs syntax highlighting

README.md

@@ -1,9 +1,28 @@
+<!-- 
+TODO
+- update react spring to v9 on release
+	- should fix about of typescript issues
+- fix remaining typescript errors
+-->
+
 <h1 align="center">
 	<img height="350" src="./screenshots/example.png" />
-	<br><br>
+	<br/>
 	<a href="https://catc.github.io/react-timekeeper/">React Timekeeper</a>
 </h1>
 
+<p align="center">
+  <a href="https://npmjs.org/package/driver.js">
+    <img src="https://img.shields.io/travis/catc/react-timekeeper" alt="build" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-timekeeper">
+    <img src="https://img.shields.io/npm/dm/react-timekeeper" alt="downloads" />
+  </a>
+  <a href="https://github.com/catc/react-timekeeper/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-yellow.svg" />
+  </a>
+</p>
+
 <p align="center">
 	<b>
 		Time picker based on the style of the
@@ -14,6 +33,7 @@
 	</b>
 </p>
 
+------------
 <br/>
 
 ## Installation
@@ -66,7 +86,7 @@ For full api and examples, see [API docs](https://catc.github.io/react-timekeepe
 
 Other useful commands:
 - build docs: `npm run docs:build`
-- run all tests: `npm run tests:run`
+- run all tests: `npm run tests`
 - watch tests: `npm run tests:watch`
 - create lib to publish npm: `npm run lib`
 

docs/js/content.tsx

@@ -1,21 +1,20 @@
-import React, { useEffect } from 'react'
+import React, { useLayoutEffect } from 'react'
 import { hot } from 'react-hot-loader'
+import '../css/style.scss'
 
 import highlight from 'highlight.js/lib'
 import 'highlight.js/lib/languages/javascript'
 import 'highlight.js/lib/languages/scss'
 import 'highlight.js/styles/dracula.css'
 
-import '../css/style.scss'
-
 import Intro from './sections/intro'
 import Installation from './sections/installation'
 import API from './sections/api'
 import Examples from './sections/examples'
 import Other from './sections/other'
 
 function Content() {
-	useEffect(() => {
+	useLayoutEffect(() => {
 		highlight.configure({
 			tabReplace: '    ',
 		})