I'm using antd Statistic.Countdown with a date format. I would like to wrap each of the numbers with a div and inside there to be said days, hours, minutes, seconds etc. Is there an easy way to do that?
<Countdown className='countdown' value={deadline} format={`[<div>] DD [days</div>] [<div>] HH [hours </div>] [<div>] mm [Minutes </div>] [<div>] ss [seconds</div>]`} />
What I'm trying to achieve is have all the numbers on one line and the tag (days, hours, min and sec) centered underneath each number. Is there an easy way to do that?
If you take a look at source of CountDown component Here, you can see that it actually is using Statistic component with custom formatter prop, so right now we can not use formatter prop, but since CountDown is a class component, we can override the default formatter by using React.ref, I've implemented an example Here on StackBlitz, you can check it out.
I think It would be better if you open an issue in antd's github and ask them to add ability to CountDown component to accept formatter prop.