Add Custom Text on Single Day (v8)

[brennondenny]

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

[gpbl]

@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.

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 }} />;
}

[ammarjmhor10]

Thanks for this answer. But how to pass a dynamic date like props ?

[gpbl]

@ammarjmhor10 you can't add extra props to the day component, however you can create the component when the dynamic date is in the scope:

export default function App(props: { dynamicDate: Date }) {
  const { dynamicDate = new Date() } = props;

  // The custom  component has now access to the "dynamic" date
  const DayWithText = (dayProps: DayProps) => {
    return (
      <span>
        <Day {...dayProps} />
        {isSameDay(dayProps.date, dynamicDate) && "Same day!"}
      </span>
    );
  };

  return (
    <DayPicker
      components={{
        Day: DayWithText
      }}
    />
  );
}

Example: https://codesandbox.io/s/sandpack-project-forked-0emlow?file=/App.tsx

[brennondenny]

@gpbl thanks but I'm having trouble adding a custom modifier for a specific date. I think I need to pass in arrayMatcher?
In the example I'm trying to add this text to the 28th.

[gpbl]

@brennondenny would help to see you code. Start from the CodeSandbox i posted :)

[brennondenny]

Was able to get it, thanks