Yuva roadmap hooks

React hooks over the useyuva headless client for a public roadmap board: the board and its stage counts, the ideas of a stage by top votes or newest with a title search, voting and suggesting an idea. Built on the discussion hooks. Labels with English defaults.

L'aperçu utilise des données d'exemple. Il n'a besoin ni de réseau ni de canal.

tsx

import { YuvaDiscussionsProvider } from "@/hooks/use-yuva-discussions"
import { useIdeas } from "@/hooks/use-yuva-roadmap"

function Planned() {
  const { ideas, loading } = useIdeas("planned", "top")
  if (loading) return null
  return (
    <ul>
      {ideas.map((idea) => (
        <li key={idea.id}>
          {idea.title} ({idea.votes})
        </li>
      ))}
    </ul>
  )
}

export function Roadmap() {
  return (
    <YuvaDiscussionsProvider
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
    >
      <Planned />
    </YuvaDiscussionsProvider>
  )
}

Installation

Exécutez ceci dans un projet shadcn. Les fichiers sont copiés dans votre propre code.

Shell

npx shadcn@latest add https://useyuva.com/r/use-yuva-roadmap.json

Shell

pnpm dlx shadcn@latest add https://useyuva.com/r/use-yuva-roadmap.json

Shell

yarn dlx shadcn@latest add https://useyuva.com/r/use-yuva-roadmap.json

Shell

bunx --bun shadcn@latest add https://useyuva.com/r/use-yuva-roadmap.json

Utilisation

tsx

import { useIdeas, useRoadmap } from "@/hooks/use-yuva-roadmap"

const { board } = useRoadmap()
const { ideas, vote } = useIdeas("planned", "top")

Props

`RoadmapResult`

Prop	Type
`board`	`ClientRoadmap \| null`
`loading`	`boolean`
`error`	`unknown`
`reload`	`() => Promise<void>`

`IdeasResult`

Prop	Type
`ideas`	`Discussion[]`
`loading`	`boolean`
`error`	`unknown`
`hasMore`	`boolean`
`loadMore`	`() => Promise<void>`
`reload`	`() => Promise<void>`
`suggest`	`(input: IdeaInput) => Promise<Discussion>`
`vote`	`(idea: Discussion) => Promise<void>`

Libellés

Les libellés sont listés sur Yuva roadmap.

Dépendances

L'installation de cet élément ajoute aussi ce qui suit.

Autres éléments Yuva

Yuva discussions hooks

Paquets npm

useyuva ↗

← PrécédentYuva help hooks