import "./App.less" ; import { h } from 'preact' ; import HookedComponent from "./HookedComponent" ; import { prehook , useState } from '../lib/prehook/prehook' ; import CustomHookComponent from "./CustomHookComponent" ; import CustomHookComponent2 from "./CustomHookComponent2" ; const getRandomColor = ( ) => '#' + Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) ; /**
 * Declare our App component as a Prehook component.
 */ export default prehook ( function App ( ) { const isHookedComponentVisible = useState ( true ) ; const colorState = useState ( getRandomColor ( ) ) ; const defaultSuperProp = Math . floor ( Math . random ( ) * 100 ) ; return ( ) => ( < div class = "App" > < h1 > Hello Prehook 🚀 < /h1> < p > Open dev console and check source code to know more . < /p> { isHookedComponentVisible ( ) ? < div > { } < h3 > Props with hooked components < /h3> < p > This example will show update cycle when updating props of an hooked component . < /p> < button onClick = { e => colorState ( getRandomColor ( ) ) } > Change color on HookedComponent < /button> { } < HookedComponent defaultSuperProp = { defaultSuperProp } color = { colorState . value } onDetach = { ( ) => isHookedComponentVisible ( false ) } > { } { } { } < CustomHookComponent /> { } < hr /> < CustomHookComponent2 color = { colorState . value } / > < /HookedComponent> < /div> : < button onClick = { e => isHookedComponentVisible ( true ) } children = "Re-attach a new instance of HookedComponent" / > } < /div>); } ) ;