Skip to content

SwapnilSoni1999/tw-daterange

Repository files navigation

tw-daterange

A DateRange picker made with tailwind and date-fns

tw-daterange


How to install

  1. Make sure you have tailwind installed and setup

  2. using npm

npm install tw-daterange

using yarn

yarn add tw-daterange
  1. Add the configuration to your tailwind.config.js
module.exports = {
  // ...
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/tw-daterange/dist/index.esm.js",
  ],
  // ...
}

How to use

import { useState } from "react"
import DateRangePicker from "tw-daterange"

const App = () => {
  const [range, setRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
  })

  return (
    <DateRangePicker
      initialRange={range}
      onUpdate={(dateRange) => {
        setRange(dateRange)
      }}
    />
  )
}

export default App

License

MIT © Swapnil Soni