You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

49 lines
935 B

"use strict";
const React = require("react");
const ReactDOM = require("react-dom");
// the below would be 'library code' ///////////////////////////////////
let TitleContext = React.createContext();
function PanelTitle({ children }) {
let setTitle = React.useContext(TitleContext);
setTitle(children);
return null;
}
function Panel({ view }) {
let [ title, setTitle ] = React.useState("Default title");
let View = view;
return (
<div className="panel">
<h1>{ title }</h1>
<hr/>
<TitleContext.Provider value={setTitle}>
<View />
</TitleContext.Provider>
</div>
);
}
// end-user code goes below ///////////////////////////////////////
function SomeView() {
return (<>
<PanelTitle>Hello world!</PanelTitle>
<p>Some text goes here.</p>
<p>More text goes here.</p>
</>);
}
function App() {
return (
<Panel view={SomeView} />
);
}
ReactDOM.render(<App />, document.getElementById("app"));