Custom components/renderers as props
See original GitHub issueI haven’t checked out the code yet, so can’t tell if it would be easy or not, but one thing I’ve done on other components is to be able to pass components or function renderers as props, like < InfiniteCalendar header={<MyCustomCalendarHeader />} />
. This allows for much more sophisticated theming/customizations, displaying dates differently, having custom “cells” for days, etc.
If others are interested I can start working on it later this week and see how it could work.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Render Props - React
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A...
Read more >How To Customize React Components with Props
In this tutorial, you'll create custom components by passing props to your component. Props are arguments that you provide to a JSX element....
Read more >React render props vs. custom Hooks - LogRocket Blog
Render props are an advanced pattern for sharing logic across components. A component, usually called a container component, can delegate ...
Read more >Rendering React Components With Custom Elements
A common approach to render a component in React is to call the ReactDOM.render method on a DOM element. If you want to...
Read more >How to Create a Custom React Renderer - This Dot Labs
Very little time is spent on the piece of logic that actually renders the App component. ReactDOM Rendering. This line is responsible for...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey guys, just shipped version
2.0.0
, which comes with the ability to enhance or replace the built-in components.You can now pass a custom
DayComponent
,HeaderComponent
, andYearsComponent
prop.Check out #73 for more details.
If you’d like to get a better sense of what that looks like in practice, check out https://github.com/clauderic/react-infinite-calendar/blob/master/src/Calendar/withMultipleDates.js or https://github.com/clauderic/react-infinite-calendar/blob/master/src/Calendar/withRange.js
Hey @GregoryPotdevin, there have been talks about this in #15, and it’s definitely something I’d be interested in working on, but I’m hesitant to do so until I know for sure it wouldn’t conflict with other planned features (such as date range selection #33), or at least would like to make sure we find a way to conciliate both of these features.