Build a custom component

To build a custom Component, write its definition, its web rendering, and use it by name. Leaseline declares a Lease Noun and shows each one's countdown to renewal.

PrerequisitesCopy Anchor Link

• A Startup with a Site or an App, such as Leaseline after mounting the App.

StepsCopy Anchor Link

1. 1

   To declare the Component, write its props and renderers:

   Copy Text

   ---
   props:
     lease: { type: Lease, required: true }
   renderers: [web, markdown]
   ---

2. 2

   To draw it for people, compose its web rendering from startup-builder/ui:

   Copy Text

   import { StateBadge, Timeline } from 'startup-builder/ui'
   
   export default function RenewalCountdown({ lease }: { lease: Lease }) {
     const days = Math.ceil((Date.parse(lease.endsOn) - Date.now()) / 86_400_000)
     return (
       <section>
         <h3>{lease.unit}: {days} days to renewal</h3>
         <StateBadge thing={lease.$id} />
         <Timeline thing={lease.$id} />
       </section>
     )
   }

3. 3

   To use it, name it in a view or a Page: <RenewalCountdown lease="lease_4loEed1JG4" />.

ResultCopy Anchor Link

The Component renders as HTML for people and as Markdown for agents, from one definition. Its props are typed by the Noun, so a wrong field fails the build.

Next stepsCopy Anchor Link

• Components: the full contract.
• Renderers: how one view draws for each reader.