Overriding PropsContext

1 Answer 88 Views
General Discussions Wrappers for React
Grant
Top achievements
Rank 3
Iron
Iron
Veteran
Grant asked on 15 Jan 2022, 07:28 PM | edited on 15 Jan 2022, 07:30 PM

Hi, 

So the new PropsContext features look great, but I need some clarification, can they be overridden in the component?

eg:
<DatePickerPropsContext /> contains a min (date) value of today, which is generally fine, however in one instance of the datepicker, I want the min (date) to be tomorrow.I've noticed that any field set in the props context cannot be overridden, am I using this incorrectly, is the props context not meant to be used for default values app-wide?

See example: https://stackblitz.com/edit/react-hba3r8?file=app%2Fmain.jsx

 

Thanks,
Grant

1 Answer, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 17 Jan 2022, 12:39 PM

Hello Grant,

Detailed information and discussion about the PropsContext can be found in the following public issue:

As you will notice, all properties provided from the context will be applied to the nested components. However, if you want to use the "min" value for example from the component, you can add condition within the callback of the Context properties and check if the "min" property is set in the component and if so, do not return it:

  const datepickerDefaults = React.useCallback((props) => {
    if (props.min) { //you can make condition that will skip setting the min if it is already set in the component
      return {
        ...props,
      };
    } else {
      return {
        ...props,
        min: new Date(),
      };
    }
  });

One more approach would be to wrap the specific DatePicker in another DatePickerPropsContext that returns only the component props:

      <DatePickerPropsContext.Provider value={(props) => ({ ...props })}>
        Overriding min Date: <DatePicker min={new Date(2022, 1, 1)} /> (no
        Change from Props)
      </DatePickerPropsContext.Provider>

Here is an example with both approaches:

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions Wrappers for React
Asked by
Grant
Top achievements
Rank 3
Iron
Iron
Veteran
Answers by
Konstantin Dikov
Telerik team
Share this question
or