able-baker/example/app.tsx

39 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-06-16 14:59:27 -04:00
import { VNode } from "https://esm.sh/v118/preact@10.15.1/src/index.js";
import React from "react";
2023-06-15 17:13:51 -04:00
2023-06-16 14:59:27 -04:00
const CTXString = React.createContext("lol");
const Butt =(props:{label:string})=>
{
const [countGet, countSet] = React.useState(3);
return <button onClick={e=>countSet(countGet+1)}>{props.label+" -- "+countGet}</button>;
};
type StateBinding<T> = [get:T, set:React.StateUpdater<T>];
const CTXState = React.createContext(null) as React.Context<StateBinding<string>|null>;
const Outer =(props:{children:VNode})=>
{
const binding = React.useState("lol?");
return <CTXState.Provider value={binding}>
{props.children}
</CTXState.Provider>
};
const Inner =()=>
{
const binding = React.useContext(CTXState);
return <button onClick={e=>binding && binding[1](Math.random().toString())}>{binding?.[0]??"(its null)"}!</button>
};
2023-06-15 17:13:51 -04:00
2023-06-07 14:15:57 -04:00
export default ()=>
{
2023-06-16 14:59:27 -04:00
return <CTXString.Provider value="intradestink">
2023-06-17 14:48:39 -04:00
<div><h1>Title</h1></div>
2023-06-16 14:59:27 -04:00
<Outer>
<Inner/>
</Outer>
<Outer>
<Inner/>
</Outer>
</CTXString.Provider>
2023-06-07 14:15:57 -04:00
}