mcsolutions/demo-react-animated-list
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix semantic HTML for better embedding

Browse Source
This commit is contained in:
Matthew Cardarelli 2024-08-06 19:19:52 -07:00
parent dc95275086
commit 30d6d1dddd
2 changed files with 41 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/AnimatedListDemo.tsx
View File

@ -82,44 +82,45 @@ export const AnimatedListDemo = () => {
useAnimatedListItems({ keys: items });
return (
<main>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('reverse');
}}
>
Reverse
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('randomize');
}}
>
Randomize
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('insert');
}}
>
Insert
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('remove');
}}
>
Remove
</button>
<>
<div className="buttons">
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('reverse');
}}
>
Reverse
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('randomize');
}}
>
Randomize
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('insert');
}}
>
Insert
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('remove');
}}
>
Remove
</button>
</div>
<ol>
{items.map((item) => {
return (
@ -133,6 +134,6 @@ export const AnimatedListDemo = () => {
);
})}
</ol>
</main>
</>
);
};

2
src/index.tsx
View File

@ -10,7 +10,7 @@ class AnimatedListComponent extends HTMLElement {
}
connectedCallback() {
const rootNode = document.createElement('main');
const rootNode = document.createElement('section');
this.appendChild(rootNode);
this.root = createRoot(rootNode);
this.root.render(<AnimatedListDemo />);