How do I translate strings outside of the component?

Thank you for the library. I really love it. I have just one problem. How do I translate a string outside of the React component? For example I modify a Pikaday plugin like this:

class DateInput extends React.Component {
    pikadayInitialOptions = {
        onDraw: (pikaday) => {
            (...)
            let tomorrowBtn = document.createElement('a');
            tomorrowBtn.appendChild(document.createTextNode(translate('pikaday.buttons.tomorrow')));
            (...)
        }
    }

    render() {
        (...)
    }

}

I cannot use Translate component in such case. I need a plain function (translate in this case). How can I achieve something like that with react-localize-redux? Thank you.

[ryandrewjohnson]

This is a good question, and has pointed out a gap in the docs as this is totally doable:

When you wrap your component with the withLocalize HOC that component gains access to all the props in LocalizeContext including the translate function, which is what you’re looking for.

Using your example:

import { withLocalize } from 'react-localize-redux';

class DateInput extends React.Component {
    pikadayInitialOptions = {
        onDraw: (pikaday) => {
            (...)
            let tomorrowBtn = document.createElement('a');
            tomorrowBtn.appendChild(document.createTextNode(this.props.translate('pikaday.buttons.tomorrow')));
            (...)
        }
    }

    render() {
        (...)
    }

}

export default withLocalize(DateInput);

[khalidahmedshalabi]

"react-localize-redux": "^3.5.2"

import Toast from 'react-native-simple-toast'
import { getTranslate } from 'react-localize-redux';
import { store } from '../App'; // must be exported from your App.js

export const LongToast = (message) => {
	const translate = getTranslate(store.getState().localize)
	Toast.show(translate(message), Toast.LONG)
}