dynamic-cards

Welcome to dynamic-cards 👋

🏠 Homepage

Prerequisites

• node >=10

Install with npm

yarn install dynamic-cards

Usage

base

<DynamicCard>
  {(key) => {
    return (
      <div className="card-demo">
        <img className="emoji" src="https://z3.ax1x.com/2021/03/23/6To1Ve.png" alt=""/>
        <p className="block">this card key number with {key}</p>
      </div>
    )
  }}
</DynamicCard>

support for default

<DynamicCard
  defaultNum={2}
>
  {(key) => {
    return (
      <div className="card-demo">
        <img className="emoji" src="https://z3.ax1x.com/2021/03/23/6To1Ve.png" alt=""/>
        <p className="block">this card key number with {key}</p>
      </div>
    )
  }}
</DynamicCard>

support for async

const timeout = (ms: number) => {
  return new Promise(resolve => setTimeout(() => {
    resolve(console.log('done'))
  }, ms));
}

const willAdd = async () => {
  await timeout(2000)
}

const willCancel = async () => {
  await timeout(2000);
}

<DynamicCard
  defaultNum={2}
  willAdd={willAdd}
  willCancel={willCancel}
>
  {(key) => {
    return (
      <div className="card-demo">
        <img className="emoji" src="https://z3.ax1x.com/2021/03/23/6To1Ve.png" alt=""/>
        <p className="block">this card key number with {key}</p>
      </div>
    )
  }}
</DynamicCard>

Show your support

Give a ⭐️ if this project helped you!