daisyui / react-daisyui Goto Github PK
View Code? Open in Web Editor NEWdaisyUI components built with React 🌼
Home Page: http://react.daisyui.com/
License: MIT License
daisyUI components built with React 🌼
Home Page: http://react.daisyui.com/
License: MIT License
Typings works perfectly if for example I include "react-daisy-ui" in a NextJS app.
But they are not working in a project where I am using ESM (I believe this is somehow the cause of the issue).
[1] TSError: ⨯ Unable to compile TypeScript:
[1] src/components/navigation.tsx(1,24): error TS7016: Could not find a declaration file for module 'react-daisyui'. '/users/<home>/mah-fastify/node_modules/react-daisyui/dist/react-daisyui.modern.js' implicitly has an 'any' type.
And of course I see that typings are present, so I don't really understand where the problem is coming from.
Do you have any idea?
I´m trying to create a dropdown and set one item as active but I can't, I have to use Menu.Item with a div as child with 'active' class. I'd like to set 'active' as prop (No className)... Thank you
I get the classic error Could not find a declaration file for module 'react-daisyui'
Version 2.4.4
works fine.
If I try passing a custom classname, the Dropdown didn't pass/merge it with other classnames properly.
<Dropdown className="custom-classname" >
<div role="listbox" class="dropdown custom-classname">
<div role="listbox" class="dropdown">
Many of the Storybook stories feature components without backgrounds and the readability is very low. For example, our Collapse component:
Here's how the Collapse component (and all components) are displayed on the daisyUI site:
Readability seems generally better because the component itself is wrapped in the preview grid. I think it would be a good idea to wrap existing stories in a similar container to help clarify the distinction between components and the background.
Component: Table
Issue: Table component not passing 'key' prop to children of lists
Currently the Table component is not passing the 'key' prop to its children that are returned by the array.map in Row, Footer and Head component.
This is causing client side warnings and possibly unnecessary rerenders of the children.
I've already written the fix for it but I do not have the rights to open a branch and push to this repository.
I could not find contributing guidelines but I'd be happy to contribute to this.
I got this warning from webpack:
Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
Issue
Due to defaultChecked
is always set internally, if checked
is also set, warning is thrown
Warning: Checkbox contains an input of type checkbox with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components
at input
at eval (webpack-internal:///../../node_modules/react-daisyui/dist/react-daisyui.modern.js:4689:24)
Point of interest:
react-daisyui/src/Checkbox/Checkbox.tsx
Lines 26 to 37 in 8887f5f
Suggestion: Don't set default value for defaultChecked
or better yet, remove them both (leave it to {...props}
)
This causes a Warning: Each child in a list should have a unique "key" prop
warning in the console
Repo of code with issue : https://github.com/arjunindia/fake-ecommerce-app
Vercel deploy: https://fake-ecommerce-app.vercel.app/
Reproduction:
https://codesandbox.io/s/react-daisyui-example-forked-x46041?file=/src/App.tsx
Expected behavior (in plain HTML):
Should get the value
attribute
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
Actual result:
Getting the inner text
of <Select.Option>INNER TEXT</Select.Option>
Related code:
The root cause should be the missing value
prop here
react-daisyui/src/Select/SelectOption.tsx
Line 18 in 7b97f48
Some of Storybook examples at which some additional property added don't show proper hierarchical component arguments.
The screenshots are the ones of CodeMockup > Highlighted Line
It should show the above whole code, which is just currently being passed as argument for component reusing.
It would be better if the whole code thing shows the contents.
I'd like to do some works for this if permitted :)
color prop only accepts primary, secondary, accent?
Hi 👋,
I'm experiencing erratic behavior with the Rating
component.
The issue occurs locally and on the documentation site.
Feature Request:
tag
prop ( or similar ) on Theme
component so it can be rendered as an element other than div
Use Case:
<Theme tag="body" dataTheme="dark">
<main>{children}</main>
</Theme>
Output:
<body data-theme="dark">
<main>
<div>Hello World</div>
</main>
</body>
Will try to open a PR if space allows and this interests the team, but floating this idea up in the meantime.
Thanks for all the work on this, so awesome!
https://react.daisyui.com/ is down,
Getting this error
Error 1016 Ray ID: 71eadc6d8f098602 • 2022-06-21 06:59:21 UTC
Origin DNS error
What happened?
You've requested a page on a website (react.daisyui.com) that is on the Cloudflare network. Cloudflare is currently unable to resolve your requested domain (react.daisyui.com).
What can I do?
If you are a visitor of this website:
Please try again in a few minutes.
If you are the owner of this website:
Check your DNS settings. If you are using a CNAME origin record, make sure it is valid and resolvable. Additional troubleshooting information here.
Thanks for this amazing library ❤️
UPDATED: I misunderstand that it is an official library
I don't know how to use react-daisyui + daisyui + Tailwindcss in Next.js
When I try to use them, the CSS of daisyui is not loaded.
I found a tutorial before that I need to add 'node_modules/react-daisyui/dist/react-daisyui.cjs',
to tailwind config content.
After doing that it works, but there are some problems.
The CSS of class btn-ghost
is not loaded.
My code:
import { Button } from 'react-daisyui'
export default function Test() {
return (
<Button color="ghost">Test</Button>
)
}
Implement the <Chat>
component added in daisyui 2.42: xhttps://daisyui.com/components/chat/
Include option to use svg in Avatar
The positional classes are not being picked up from source files. Seems to be related to a change some time ago from safelisting every class to using content as per instrunction in the README file:
Lines 35 to 42 in 50b25e6
Line number 39 in Tooltip.tsx seems to be the problem; It is interpolating a class making tailwind unable to detect correctly.
react-daisyui/src/Tooltip/Tooltip.tsx
Lines 33 to 41 in 50b25e6
Here is a print and a stackblitz link showing the problem:
I would like to try and submit a pull request with a fix. But wanted to discuss a bit about the best path to take.
This problem may very well be affecting other components too. I just found a mention of it in issue #116
First of all, thank you for the react library :D
Having the react children within a label makes it impossible to create something like the following
.
Just deleting the label wrapper will make the component more extensible.
Also, a little suggestion: since the Icon is rendered as it is (with no manipulation) maybe there's no reason for the prop to exist (it can be passed as part of the children).
Unit / Integration testing especially for all the stateful components
I have installed the package on a nextjs application (with nx).
I succeed to render a button just like in the quickstart of the readme.
But 2 seconds later, I have an error popping:
Server Error
Error: Cannot find module '/Users/user/Desktop/folder/node_modules/react/jsx-runtime' imported from /Users/user/Desktop/folder/node_modules/react-daisyui/dist/react-daisyui.modern.js
Did you mean to import react/jsx-runtime.js?
"daisyui": "^2.11.0",
"react-daisyui": "^1.7.1"
Currently, there's no example of Swap
in storybook
Popups such as modals and dropdowns should use portals for the content to avoid problems with overflow: hidden or z-indexes.
When opening a modal I can't get an autofocus on an input field. When I check in Chrome devtools and check "document.activeElement" I see the button that opened the modal is actually in focus.
I see a lot of solutions for bootstrap mentioning autoFocus={false} on the modal and true on the input but autoFocus is not here as a Modal propery. Any advice?
Hi 👋
<Alert icon={<ExclamationTriangleIcon width="24" height="24"/>} className={"mt-6 alert-warning" + (showAlert ? "block" : "hidden")}>ウォレットが未接続です</Alert>
<Alert icon={<ExclamationTriangleIcon width="24" height="24"/>} status="warning" className={"mt-6" + (showAlert ? "block" : "hidden")}>ウォレットが未接続です</Alert>
{
"name": "nft-admin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "^2.0.11",
"@rainbow-me/rainbowkit": "^0.6.1",
"daisyui": "^2.30.0",
"ethers": "^5.7.1",
"firebase": "^9.10.0",
"next": "12.3.1",
"next-transpile-modules": "^9.0.0",
"react": "18.2.0",
"react-daisyui": "^2.4.1",
"react-dom": "18.2.0",
"wagmi": "^0.6.7"
},
"devDependencies": {
"autoprefixer": "^10.4.12",
"eslint": "8.23.1",
"eslint-config-next": "12.3.1",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
}
}
Tailwind is too slow with such a safelist pattern (advised on README.md), if I remove it I go from 2s compilation time to 300ms, and I have a 12 core processor (although I'm not sure if this is multi-threaded).
Any idea why this happens, and if we should simply add an exhaustive whitelist for daisy ?
I may be doing something really silly here however I cannot get the collapse component working.
I am using NextJS 13 and the app directory to make use of server components.
This is my example component using Collapse
"use client";
import { useState } from "react";
import { Button, Collapse } from "react-daisyui";
// TODO: Create menu item type
const MenuItem = ({ item }: { item: any }) => {
const [isOpen, setIsOpen] = useState(false);
const {
item_data: { name, variations },
} = item;
const handleOpen = () => {
setIsOpen(!isOpen);
};
return (
<>
<Button onClick={() => handleOpen()}>{isOpen ? "close" : "open"}</Button>
<Collapse icon="arrow" open={isOpen} className="py-2">
<Collapse.Title className="text-xl font-medium">{name}</Collapse.Title>
<Collapse.Content>
attribute is necessary to make the div focusable
</Collapse.Content>
</Collapse>
</>
);
};
export default MenuItem;
The component renders, but doesn't show the arrow icon and is always open, modifying the open state does nothing and even just seeing open={false}
the component remains open. It's as if the JS for the component isn't running at all.
The handleOpen
function is working as expected as upon clicking the open button it's text changes to close
Using NavLink
from react-router-dom
with <DropDown.Item>
, I would get this in the console
<a> cannot appear as a descendant of <a>.
Wondering if there's a way to use NavLink
and DropDown.Item
Workaround:
<li>
<NavLink to={route}>{name}</NavLink>
</li>
Currently there no choice to custom Button
to be Link
from react-router.
Expected like:
<Button component={<Link to='/somewhere' />} />
error - TypeError: React__default.default.createContext is not a function
at eval (webpack-internal:///(sc_server)/./node_modules/react-daisyui/dist/react-daisyui.cjs:5586:60)
at Object.(sc_server)/./node_modules/react-daisyui/dist/react-daisyui.cjs (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\app\page.js:1087:1)
at __webpack_require__ (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///(sc_server)/./app/layout.tsx:7:71)
at Object.(sc_server)/./app/layout.tsx (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\app\page.js:230:1)
at __webpack_require__ (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\webpack-runtime.js:33:42)
at Object.layout (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=C%3A%5CUsers%5Cbamas%5COneDrive%5CDocuments%5CMy%20Backups%5CDevelopment%5Cnodejs%5Cthewilsonnet.com%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=C%3A%5CUsers%5Cbamas%5COneDrive%5CDocuments%5CMy%20Backups%5CDevelopment%5Cnodejs%5Cthewilsonnet.com&isDev=true&tsconfigPath=tsconfig.json!:22:153)
at Object.collectGenerateParams (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\node_modules\next\dist\build\utils.js:710:110)
at Object.loadStaticPaths (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\node_modules\next\dist\server\dev\static-paths-worker.js:43:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
type: 'TypeError',
page: '/'
}
next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
transpilePackages: ["react-daisyui"],
},
};
module.exports = nextConfig;
Currently, if the href
property is set to a Button
component, the anchor element is used.
However, it is not possible to use anchor specific properties like rel
or target
.
A solution to multi-element components is to propose a property (react-bootstrap named it as
, reactstrap named it tag
) allowing to specify the type of element (in the case of the Button
component, it would be either button
or a
). It is then possible to determine from the latter the properties specific to an element.
Possible solutions would be to move all component Storybook files to a separate folder and ignore it, or perhaps use pattern matching to exclude .stories.tsx
files from the build.
Since the value of the select is stored in a local state of the Select component, any manual change of the value don't update the selected option.
Possbile fix (default react behavior):
value
to the <select>
taginitialValue
in defaultValue
and pass it directly in the html tag as wellSo basically the code should look like this:
const SelectInner = <T extends string | number | undefined>(
props: SelectProps<T>,
ref: React.ForwardedRef<HTMLSelectElement>
): JSX.Element => {
const {
children,
defaultValue,
value,
onChange,
size,
color,
bordered = true,
borderOffset,
dataTheme,
className,
...rest
} = props
const classes = twMerge(
'select',
className,
clsx({
[`select-${size}`]: size,
[`select-${color}`]: color,
[`focus:outline-offset-0`]: !borderOffset,
'select-bordered': bordered,
})
)
return (
<select
{...rest}
ref={ref}
data-theme={dataTheme}
className={classes}
onChange={(e) => onChange?.(e.currentTarget.value as T)}
value={value}
defaultValue ={defaultValue}
>
{children}
</select>
)
}
for now many front end libaray support Modularize Imports
it will can reduce app bundle size, such as next.js, and so on. could you plan to support this?
When using the (react) Drawer the following warning is thrown.
You provided a checked
prop to a form field without an onChange
handler. This will render a read-only field. If the field should be mutable use defaultChecked
. Otherwise, set either onChange
or readOnly
.
For built-in responsiveness we need to add an optional "responsive" prop (defaulted to true in Storybook) pre-baked with TailwindCSS breakpoints:
https://tailwindcss.com/docs/screens
Ultimately, users should implement their own sizing to suit their needs. However, at the moment many of our Storybook components are too large for the preview container on mobile and this doesn't give a good first impression for the library. Additionally, some users might not want to implement responsiveness themselves and would rather use a general purpose default option.
Adding the prop would look something like this:
responsive?: boolean
to the IComponentBaseProps
interface in types.ts (https://github.com/daisyui/react-daisyui/blob/main/src/types.ts) to make the prop available on all react-daisyUI components.responsive
prop name when destructuring the component's Props type in it's definitionclsx
library, add sizing for the sm
, md
, and lg
TailwindCSS breakpoints (or wherever applicable), set conditionally when responsive
equals true. For example:clsx({
'm-2 sm:m-4 md:m-8 lg:m-16': responsive,
})
Our current <Tabs>
parent component maintains the active tab value in a useState
and passes the value along to all of the child <Tab>
components.
https://github.com/daisyui/react-daisyui/blob/main/src/Tabs/Tabs.tsx
However, this internal state-keeping causes problems when we attempt to control Tabs from the outside using the value
prop. It would be more correct to call the value
prop a defaultValue
since useState does not reload the initial value from props on rerender.
The way I see it, there are couple ways forward with this:
useEffect
hook with a dependency on the value
prop to update the internal state. (Not a huge fan of this solution)onChange
prop.I'll leave the solution up to whoever wants to tackle this. Open to other ideas as well!
I've tried to create an Input
with the following code:
<Input
type="date"
{...register('expirationDate', { required: true })}
/>
What I get when the DOM renders is:
<input type="text" name="expirationDate" class="input focus:outline-offset-0 input-bordered" value="">
What I expected was:
<input type="date" name="expirationDate" class="input focus:outline-offset-0 input-bordered" value="">
I believe this line needs to be changed:
https://github.com/daisyui/react-daisyui/blob/main/src/Input/Input.tsx#L48
type={props.text}
I use pnpm to solve some npm dependencies bugs but now I cannot import react-daisyui
.
➜ my-project-name git:(dark-mode) ✗ npm run dev
> next-js-boilerplate@1.0.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /home/indicozy/Documents/Projects/oponai/my-project-name/.env
node:internal/process/promises:279
triggerUncaughtException(err, true /* fromPromise */);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/indicozy/Documents/Projects/oponai/my-project-name/node_modules/.pnpm/[email protected]_tgktzqjq2hhcpfjfdazojt3jfa/node_modules/react/jsx-runtime' imported from /home/indicozy/Documents/Projects/oponai/my-project-name/node_modules/.pnpm/react-daisyui@2.0.3_tgktzqjq2hhcpfjfdazojt3jfa/node_modules/react-daisyui/dist/react-daisyui.modern.js
Did you mean to import react@17.0.2/node_modules/react/jsx-runtime.js?
at new NodeError (node:internal/errors:372:5)
at finalizeResolution (node:internal/modules/esm/resolve:437:11)
at moduleResolve (node:internal/modules/esm/resolve:1009:10)
at defaultResolve (node:internal/modules/esm/resolve:1218:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Stack: NextJS v12.1.6, React v17.0.2, daisyui v2.15.3, react-daisyui v2.0.3
Implement the <FileUpload>
component added in daisyui 2.40: https://daisyui.com/components/file-input/
im having an issue when im using prefix: 'tw-' in tailwind.config.js when i use the components from react-daisyui it wont add prefix on react-daisyui components any workaround?
Hi,
Thanks for this project, is really cool, i have a problem with the nextjs integration, i've noticed the classes of the react components are not being scaned, becuase they're not being added to the global styles.css tailwind file, not static not jit, it seems that its because the component library is not being scanned for the new tailwind classes they need, ¿ any ideas ?
Thanks, Hans
Click action in https://react.daisyui.com/?path=/story/layout-drawer--default
doesn't open Drawer Side
Getting exception while running npm run generate component Square
Output:
npm run generate component Square
> [email protected] generate
> plop "component" "Square"
/Users/****/Desktop/Temp/react-daisyui/node_modules/plop/bin/plop.js:3
import { Plop, run } from "../src/plop.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:892:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
at internal/main/run_main_module.js:17:11
Expected: create new component
Hi,i have an issue when using collapse (with checkbox) on mobile browser (chrome, safari)
Try this on mobile browser
We want to achieve full coverage of our components in Storybook. This means all features and design options available to users are represented by a separate story.
At the very minimum, we want to show as much as the official daisyUI docs show to demonstrate that everything has been ported over for this React wrapper.
Here are the components missing stories from the daisyUI docs:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.