The component is created in the components folder, and then used in an island component
I have tried two ways of using the lib react-datepicker:
1: Adding the import in deno.json and using it.
This way the datepicker just not appear on the screen
Vscode points shows the following error:
2: Using with npm: indicator directly onto the file
This way deno shows a massive error in the terminal
My code:
import DatePicker from 'npm:[email protected]'
import {useState} from 'preact/hooks'
export function DatePickerA({name, title, required}: {name: string, title: string, required?: boolean}) {
const [startDate, setStartDate] = useState(new Date());
return (
<label className='my-5 flex flex-col gap-y-2' for={name}>
<span className={`text-dark-blue`}>{title}</span>
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
</label>
)
}
How can I use react-datepicker?
I've tried similar things, sometimes it works, other times it doesn't. Here is what I got working for react-datepicker.
This works functionally but the types will need some fixing. The main thing you need to do is update your
importsin yourdeno.jsonfile, making sure the preact version matches throughout:Then since this uses custom CSS and deno imports don't work for CSS, we need to include that in our project manually:
_app.tsx
You will want to wrap the react
DatePickerwith an HTML tag (e.g. div) or the flex-col will mess with it. I also addedshowIconjust to test that it works as well.Here is what it looks like in Fresh with that all setup:
For reference, see these links: