@@ -89,6 +89,30 @@ schemas.forEach(function (schema) {
8989 })
9090`
9191
92+ const reactTsxCode = `
93+ export function ChildrenStyleOne() {
94+ const [value, setValue] = React.useState(0)
95+ return <div className="some-parent-component">
96+ <button onClick={() => {
97+ setValue((prev) => prev + 1);;
98+ }}>Increase count: {value}</button>
99+ {/* ò Here we declare the RenderTracker directly in the component */}
100+ <RenderTracker />
101+ </div>
102+ }
103+
104+ export function ChildrenStyleTwo(props: React.PropsWithChildren) {
105+ const [value, setValue] = React.useState(0)
106+ return <div className="some-parent-component">
107+ <button onClick={() => {
108+ setValue((prev) => prev + 1);;
109+ }}>Increase count: {value}</button>
110+ {/* ò Here, it is passed from the parent via the 'children' prop */}
111+ {props.children}
112+ </div>
113+ }
114+ `
115+
92116export const WithLineExclusionsRealCode : Story = {
93117 render : ( ) => (
94118 < GithubPermalinkBase
@@ -107,6 +131,25 @@ export const WithLineExclusionsRealCode: Story = {
107131 excludeLines = { [ [ 105 , 107 ] ] }
108132 excludeText = "// snip"
109133
134+ />
135+ ) ,
136+ } ;
137+
138+ export const ReactTsxSyntaxHighlighting : Story = {
139+ render : ( ) => (
140+ < GithubPermalinkBase
141+ permalink = "https://github.com/dwjohnston/blacksheepcode/blob/45fdceb/src/demos/react-renders/ReactRenders3.tsx#L8-L28"
142+ data = { {
143+ lines : reactTsxCode . split ( '\n' ) ,
144+ lineFrom : 8 ,
145+ lineTo : 28 ,
146+ commit : "45fdceb" ,
147+ path : "src/demos/react-renders/ReactRenders3.tsx" ,
148+ owner : "dwjohnston" ,
149+ repo : "blacksheepcode" ,
150+ commitUrl : "https://github.com/dwjohnston/blacksheepcode/commit/45fdceb" ,
151+ status : "ok"
152+ } }
110153 />
111154 ) ,
112155} ;
0 commit comments