From 37a973ee4f53c8c2c409b5a01f6eef1fcd672097 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Fri, 31 May 2024 18:00:32 -0500 Subject: [PATCH 1/2] Update styling docs --- website/docs/using-daypicker/styling.mdx | 99 +++++++++++++++++------- 1 file changed, 73 insertions(+), 26 deletions(-) diff --git a/website/docs/using-daypicker/styling.mdx b/website/docs/using-daypicker/styling.mdx index 1c5a31c255..b8f8078c04 100644 --- a/website/docs/using-daypicker/styling.mdx +++ b/website/docs/using-daypicker/styling.mdx @@ -6,11 +6,11 @@ sidebar_position: 2 DayPicker comes with a minimal style inspired by MacOS date pickers, designed to be extended and customized. -You can also use your own styles, or use a CSS framework like [Tailwind CSS](https://tailwindcss.com) or [Bootstrap](https://getbootstrap.com) to style the calendar. +You can also use your own styles, or use a CSS framework like [Tailwind CSS](https://tailwindcss.com) or [Bootstrap](https://getbootstrap.com) utilities to style the calendar. ## Default Style -To start with the included styles, import `react-day-picker/style.css` into your app. This will add the `.rdp` class names used by DayPicker. +To start with the included styles, add the `react-day-picker/style.css` to your HTML document. This will add the `.rdp` class names used by DayPicker.
Using a bundler or a React framework @@ -23,24 +23,18 @@ import "react-day-picker/style.css";
-### Importing the CSS Module - -You can import `style.module.css` if you want your CSS pre-processor to parse it. Pass the imported styles to the `classNames` prop. - -```tsx title="./MyDatePicker.jsx" -import { DayPicker } from "react-day-picker"; -import styles from "react-day-picker/style.module.css"; +
+Copying the CSS file -console.log(styles); // Output the class names as parsed by CSS modules. +If you are not using a bundler, you can copy the CSS file to your project. See [style.css](https://github.com/gpbl/react-day-picker/blob/main/src/style.css) in the DayPicker repository for the source. -export function MyDatePicker() { - return ; -} +```html title="./public/index.html" + ``` - - - +
### CSS Variables @@ -104,28 +98,81 @@ To toggle between dark and light appearance, override the accent color with the } ``` -## Custom Style +### Importing the CSS Module -Use the `classNames` prop to use other classnames instead of the default ones. +You can import `style.module.css` if you want your CSS pre-processor to parse it. Pass the imported styles to the `classNames` prop. -### Tailwind CSS +```tsx title="./MyDatePicker.jsx" +import { DayPicker } from "react-day-picker"; +import styles from "react-day-picker/style.module.css"; -... +console.log(styles); // Output the class names as parsed by CSS modules. -### Custom CSS +export function MyDatePicker() { + return ; +} +``` -... + + + +## Custom Class Names -### Inline Styles +Use the `classNames` prop to use other classnames instead of the default ones. The [`ClassNames`](../api/type-aliases/ClassNames.md) type lists all the class names used by DayPicker. They are the value of the [`UI`](../api/enumerations/UI.md), [`DayModifiers`](../api/enumerations/DayModifier.md) and [`CalendarFlag`](../api/enumerations/CalendarFlag.md) enums. -To change the appearance of any DayPicker element via inline-styles use the `styles` prop. +For example, to change the class name of the calendar container: + +```tsx + +``` + +Or the disabled days: + +```jsx + +``` + +### Tailwind CSS -:::warning +If you are including [Tailwind CSS](https://tailwindcss.com) in your project, use the Tailwind CSS class names to style the calendar. -Mouse hover effects cannot be styled inline. +- Add to the `classNames` the class names you want to override. +- Extend the default class names with [`getDefaultClassNames`](../api/functions//getDefaultClassNames.md). +- Read [`style.css`](https://github.com/gpbl/react-day-picker/blob/main/src/style.css) from source and get familiar with the [UI elements](../using-daypicker/anatomy.mdx). + +```tsx +import { DayPicker, getDefaultClassNames } from "react-day-picker"; + +export function MyCalendar() { + const defaultClassNames = getDefaultClassNames(); + return ( + + ); +} +``` + + + + + +:::info TailwindCSS-only CSS + +We currently don't have a CSS file _completely_ written in TailwindCSS. If you want, you can help us to create one to include in the docs here. [Open a thread](https://github.com/gpbl/react-day-picker/discussions/new?category=ideas) ::: +## Inline Styles + +To change the appearance of any DayPicker element via inline-styles use the `styles` prop. + ```tsx const monthCaptionStyle = { borderBottom: "1px solid currentColor", From 7fad326574dcc5e850d22544bfeb821d20c1ca3e Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Fri, 31 May 2024 18:00:48 -0500 Subject: [PATCH 2/2] Export getDefaultClassNames helper --- examples/TailwindCSS.tsx | 30 ++++++++++++++++++++++++++++++ examples/index.ts | 1 + src/UI.ts | 8 ++------ src/helpers/index.ts | 2 ++ src/index.ts | 1 + 5 files changed, 36 insertions(+), 6 deletions(-) create mode 100644 examples/TailwindCSS.tsx create mode 100644 src/helpers/index.ts diff --git a/examples/TailwindCSS.tsx b/examples/TailwindCSS.tsx new file mode 100644 index 0000000000..6672676414 --- /dev/null +++ b/examples/TailwindCSS.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +import { DayPicker, getDefaultClassNames } from "react-day-picker"; + +export function TailwindCSS() { + const defaultClassNames = getDefaultClassNames(); + return ( + <> + + + + ); +} diff --git a/examples/index.ts b/examples/index.ts index 93295032fd..aaf84fde26 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -50,6 +50,7 @@ export * from "./Start"; export * from "./StylingCss"; export * from "./StylingInline"; export * from "./StylingModifiers"; +export * from "./TailwindCSS"; export * from "./Testcase1567"; export * from "./TestCase2047"; export * from "./WeekIso"; diff --git a/src/UI.ts b/src/UI.ts index 578230945c..0e34dff14f 100644 --- a/src/UI.ts +++ b/src/UI.ts @@ -1,12 +1,8 @@ /** * The UI elements composing DayPicker. * - * These elements are mapped to the components directory. - */ -/** - * The UI elements composing DayPicker. - * - * These elements are mapped to the components directory. + * These elements are mapped to the classnames used by DayPicker. Use the + * `classNames` prop to customize the classnames. */ export enum UI { /** The previous button in the navigation. */ diff --git a/src/helpers/index.ts b/src/helpers/index.ts new file mode 100644 index 0000000000..5d90c92790 --- /dev/null +++ b/src/helpers/index.ts @@ -0,0 +1,2 @@ +// Only export helpers that can be useful to other developers. +export * from "./getDefaultClassNames"; diff --git a/src/index.ts b/src/index.ts index e2ebe4dafb..95f6cf9c9b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,6 +4,7 @@ export * from "./classes"; export * from "./components/custom-components"; export * from "./contexts"; export * from "./formatters"; +export * from "./helpers"; export * from "./labels"; export * from "./types-deprecated"; export * from "./types";