question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Better example code / tutorial?

See original GitHub issue

I’m unable to get a simple example running with any of the example code on the website in a React Codesandbox. Is there any fully working example that can be provided?

import "./styles.css";
import React from "react";
import { Command } from "cmdk";

export default function App() {
  const loading = true;
  const setOpen = () => {};
  const open = true;

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Command.Dialog open={open} onOpenChange={setOpen}>
        <Command.Input />

        <Command.List>
          {loading && <Command.Loading>Hang on…</Command.Loading>}

          <Command.Empty>No results found.</Command.Empty>

          <Command.Group heading="Fruits">
            <Command.Item>Apple</Command.Item>
            <Command.Item>Orange</Command.Item>
            <Command.Separator />
            <Command.Item>Pear</Command.Item>
            <Command.Item>Blueberry</Command.Item>
          </Command.Group>

          <Command.Item>Fish</Command.Item>
        </Command.List>
      </Command.Dialog>
    </div>
  );
}

https://codesandbox.io/s/wizardly-currying-x68myq

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
tanmayairbasecommented, Sep 2, 2022

I faced the same, tried using previous versions and 0.1.16 works. Something got introduced in 0.1.17 it seems. You can do same till the error is fixed I guess

0reactions
pomdtrcommented, Sep 4, 2022

I fixed the issue by overriding one of the dependencies in the package.json:

  "overrides": {
    "@radix-ui/react-dialog": "1.0.0"
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to write a Good Technical Tutorial - freeCodeCamp
It's always helpful to provide code snippets in your technical tutorials. This will let your readers know what you are doing and what...
Read more >
How to Code for Beginners: Best Ways to Learn How to Code
Alternatively, you can choose BitDegree's interactive Java tutorial. This course will teach you the basic syntax and features of the language.
Read more >
6 Tips on How to Write Better Tutorials, Part 2 - Coding Writer
In your text, you explain what recursion is, what it's good for and how it works. But in your code example, you point...
Read more >
How to Start Coding: The Ultimate Guide for Beginner ...
Want to learn how to code but unsure where to start? ... For example, say you want to become a developer to earn...
Read more >
Top 100+ Websites to Learn to Code for Free
The tutorials come with many code examples and vary in topics and difficulty levels. It also has an online code editor called Try...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found