You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
935 B
JavaScript
50 lines
935 B
JavaScript
"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"));
|