Skip to content

Instantly share code, notes, and snippets.

@ryanditjia
Created March 10, 2025 08:36
Show Gist options
  • Save ryanditjia/bc1e3f98dea157c8013da217e2f80aeb to your computer and use it in GitHub Desktop.
Save ryanditjia/bc1e3f98dea157c8013da217e2f80aeb to your computer and use it in GitHub Desktop.
Example React component composition
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