API
Every prop <Ram /> takes. Only children is required; everything else has a default that looks like the examples throughout these pages.
- children
- ReactNode
- The text to frame. Required.
- delay
- number
- Default: 0
- Milliseconds to wait before the frame appears.
- duration
- number
- Default: 1400
- Length of the tracking pass, in milliseconds.
- holdDuration
- number
- Default: 1200
- How long the frame holds before leaving, in milliseconds.
- label
- boolean | (size) => string
- Default: true
- Show the width × height label, or format it yourself.
- labelPosition
- "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
- Default: "top"
- Where the label sits.
- handles
- boolean
- Default: true
- Draw the four corner handles.
- handleSize
- number
- Default: 6
- Width and height of each corner handle, in px.
- handleFill
- "hollow" | "solid"
- Default: "hollow"
- Ring each handle around the page colour, or fill it with the frame colour.
- handleBackground
- string
- Default: light-dark(#fff, #111)
- What a hollow handle is filled with. Ignored when handles are solid.
- lineWidth
- number
- Default: 1
- Thickness of the outline, in px.
- handleLineWidth
- number
- Default: 1
- Thickness of the handle rings, in px. Independent of lineWidth, the way a design tool keeps a handle hairline however heavy the stroke is.
- animation
- "tracking" | "static"
- Default: "tracking"
- Whether the letter-spacing breathes while the frame is up.
- trigger
- "mount" | "hover" | "click" | "manual"
- Default: "mount"
- What starts the sequence. Becomes "manual" when active is set.
- active
- boolean
- Controlled visibility. Implies trigger="manual".
- persistent
- boolean
- Default: false
- Keep the frame on the page instead of leaving after the hold.
- color
- string
- Default: #0d99ff
- Colour of the outline, handles and label. Any CSS colour; selection blue by default.
- labelColor
- string
- Default: light-dark(#fff, #111)
- Colour of the text inside the label.
- labelBackground
- string
- Default: currentColor
- Background of the label chip. Follows the frame colour.
- className
- string
- Applied to the wrapping span.
- style
- CSSProperties
- Applied to the wrapping span. A good place for CSS variables.
- onStart
- () => void
- Called when the frame starts to appear.
- onComplete
- () => void
- Called when the frame has left, or has settled when persistent.