Created
March 10, 2025 08:36
-
-
Save ryanditjia/bc1e3f98dea157c8013da217e2f80aeb to your computer and use it in GitHub Desktop.
Example React component composition
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
const Component = () => <Popup text="You Win" items={[]} /> | |
const Component2 = () => ( | |
<GenericPopup> | |
{/* <WinComponent items={[]} /> */} | |
<LoseComponent items={[]} /> | |
</GenericPopup> | |
) | |
const ItemLayout = ({ name, description, imageArea, children }) => ( | |
<div> | |
<div> | |
<h2>{name}</h2> | |
<p>{description}</p> | |
</div> | |
{imageArea} | |
{children} | |
</div> | |
) | |
const ShopSelectedItem = ({ onBuy }) => ( | |
<ItemLayout name="Shop Item" description="This is a shop item" imageArea={<ShopImage />}> | |
<button onClick={onBuy}>Buy</button> | |
</ItemLayout> | |
) | |
const InventorySelectedItem = ({ onUse, onDrop }) => ( | |
<ItemLayout | |
name="Inventory Item" | |
description="This is an inventory item" | |
imageArea={<InventoryImage />} | |
> | |
<button onClick={onUse}>Use</button> | |
<button onClick={onDrop}>Drop</button> | |
</ItemLayout> | |
) | |
const SkewedImage = () => <img style={{ transform: 'skew(10deg)' }} /> | |
const ShopImage = ({ price }) => ( | |
<div> | |
<SkewedImage /> | |
<div | |
style={{ | |
position: 'absolute', | |
bottom: 0, | |
left: 0, | |
right: 0, | |
backgroundColor: 'white', | |
padding: '10px', | |
}} | |
> | |
{price} | |
</div> | |
</div> | |
) | |
const InventoryImage = ({ quantity }) => ( | |
<div> | |
<SkewedImage /> | |
<div | |
style={{ | |
position: 'absolute', | |
bottom: 0, | |
left: 0, | |
right: 0, | |
backgroundColor: 'white', | |
padding: '10px', | |
}} | |
> | |
{quantity} | |
</div> | |
</div> | |
) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment