@instructure/platform-submission-sticker

React component for adding stickers to student submissions in Canvas.

Features

• 51 unique sticker designs (academic, sports, pandas, and more)
• Editable mode for teachers/graders
• Read-only mode with optional confetti effect for students
• Animated sparkle effects
• Accessible (screen reader support, keyboard navigation)
• InstUI components
• TanStack Query for data management
• Full TypeScript support

Installation

pnpm add @instructure/platform-submission-sticker @instructure/platform-canvas-fetch

Peer Dependencies

{
  "react": "^18.0.0",
  "@instructure/ui-*": "^10.0.0",
  "@tanstack/react-query": "^5.0.0"
}

Usage

import { Sticker } from '@instructure/platform-submission-sticker'
import '@instructure/platform-submission-sticker/dist/style.css'

function GradeSubmission() {
  const [submission, setSubmission] = useState({
    id: '1',
    courseId: '100',
    assignmentId: '200',
    sticker: null
  })

  return (
    <Sticker
      submission={submission}
      editable={true}
      size="medium"
      confetti={false}
      descriptions={stickerDescriptions}
      translations={stickerTranslations}
      liveRegion={() => document.getElementById('flash_screenreader_holder')}
      onStickerChange={(sticker) => {
        setSubmission({ ...submission, sticker })
      }}
    />
  )
}

API

Props

• submission: Submission - Submission data with sticker state
• editable: boolean - Whether user can change the sticker
• size: 'small' | 'medium' | 'large' - Sticker display size
• confetti?: boolean - Show confetti explosion on click (read-only mode)
• descriptions: StickerDescriptions - Alt text for each sticker
• translations: StickerTranslations - UI text translations
• liveRegion: () => HTMLElement - Accessibility live region element
• onStickerChange?: (sticker: Sticker) => void - Callback when sticker changes

Architecture

• No global state - All data passed via props
• TanStack Query - Used directly for mutations (no wrapper)
• InstUI components - Modal, Button, Alert, etc. (no abstractions)
• CSS Modules - Scoped styling
• canvas-fetch - Canvas-aware API client with Zod validation

Development

# Run tests
pnpm test

# Run tests with coverage
pnpm test --coverage

# Build
pnpm build

# Type check
pnpm type-check

Test Coverage

• 23/23 tests passing
• 95.35% statement coverage
• 93.12% branch coverage
• 84.84% function coverage