question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom components/renderers as props

See original GitHub issue

I 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:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
claudericcommented, Feb 25, 2017

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, and YearsComponent 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

1reaction
claudericcommented, Aug 27, 2016

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found