How to change the text of the FooterCount (i18n)?

[djalmajr]

Steps to reproduce the behavior:

My snippet of code is this:

Actual behavior:

I would like to change only this part of the text

Expected behavior:

To this:

How can I achieve this? I tried using formatters but no luck :/

Would be nice if we have i18n... By the way, thanks for this awesome lib

[martinjuhasz]

I had the same requirement. There is no way to just translate the of part of the footer. You need to add a custom Component and replace it with the default FooterCount one.

What i did:

const CustomModalFooter = ({ currentIndex, views }) => {
	const activeView = currentIndex + 1
	const totalViews = views.length

	if (!activeView || !totalViews) return null
	return (
		<span>
			{activeView} de {totalViews}
		</span>
	)
}

<Carousel
    components={{ FooterCount: CustomModalFooter }}
    views={[...]}
/>

[anhtran]

I agree with @martinjuhasz, you should re-write the component to get that.

[djalmajr]

So, where this is used:

I thought it would be used for this kind of problem. Re-writting the code breaks the DRY for a simple thing. :/

Anyway, thanks for response :)

[martinjuhasz]

These props are not used for the FooterCount component. The FooterCount component does not use the formatters feature as you can see here, although adding support for it would be fairly easy.

The formatters you highlighted above are used for alt-texts on the buttons for next and previous images. When you hover your mouse on those buttons the text will appear.

I gave the formatters props a try and somehow it only works when declaring ALL formatters, not just a single one. From a quick look at the code it should be merged, but it only worked for me when delcaring all formatter like:

<Carousel
    formatters={{
        getAltText: () => 'a',
        getNextLabel: () => 'b',
        getPrevLabel: () => 'c',
        getNextTitle: () => 'd',
        getPrevTitle: () => 'e',
        getCloseLabel: () => 'f',
        getFullscreenLabel: () => 'g',
    }}
    ...
/>