Add Custom Text on Single Day (v8) #1418
-
I'm trying to add custom text on certain days, in the example below I'm using a custom modifier to add a border to a single set date (28th). How would I add text above the day? Without typescript |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
@brennondenny have a look to this example: You can use the a import React from "react";
import { Day, DayProps, DayPicker, useActiveModifiers } from "react-day-picker";
function DayWithText(props) {
const activeModifiers = useActiveModifiers(props.date, props.displayMonth);
return (
<span>
<Day {...props} />
{activeModifiers.today && "Today!"}
</span>
);
}
export default function App() {
return <DayPicker components={{ Day: DayWithText }} />;
} |
Beta Was this translation helpful? Give feedback.
-
@gpbl thanks but I'm having trouble adding a custom modifier for a specific date. I think I need to pass in arrayMatcher? |
Beta Was this translation helpful? Give feedback.
@brennondenny have a look to this example:
https://codesandbox.io/s/sandpack-project-forked-huni2h
You can use the a
Day
custom component to add a content above the DayContent.