<State
initial={{
value: '',
currency: 'USD',
locale: 'fe-FR',
allowNegative: true,
output: 'number',
disabled: false,
showCode: true,
allowDecimal: true,
}}
>
{({ state, setState }) => {
return (
<>
<div style={{ padding: '5px 0' }}>
<button onClick={() => setState({ currency: 'USD' })}>
Change to USD
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ currency: 'EUR' })}
>
Change to EUR
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ error: !state.error })}
>
Turn error {state.error ? 'Off' : 'On'}
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ showCode: !state.showCode })}
>
Turn show code {state.showCode ? 'Off' : 'On'}
</button>
</div>
<div style={{ padding: '5px 0' }}>
<button onClick={() => setState({ value: 3000 })}>
Change value to 3000
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ value: 30000000.55 })}
>
Change value to 30000000.55
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ allowNegative: !state.allowNegative })}
>
Turn negative {state.allowNegative ? 'Off' : 'On'}
</button>
</div>
<div style={{ padding: '5px 0' }}>
<button onClick={() => setState({ output: 'currency' })}>
Change currency output
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ output: 'number' })}
>
Change number output
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ disabled: !state.disabled })}
>
Turn disabled {state.disabled ? 'Off' : 'On'}
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ allowDecimal: !state.allowDecimal })}
>
Turn decimal {state.allowDecimal ? 'Off' : 'On'}
</button>
</div>
<div style={{ padding: '5px 0 20px' }}>
<button onClick={() => setState({ size: 'small' })}>
Small size
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ size: 'medium' })}
>
Medium size
</button>
<button
style={{ marginLeft: 5 }}
onClick={() => setState({ size: 'large' })}
>
Large size
</button>
</div>
<CurrencyInput
name="text-input"
onChange={(name, value) => setState({ value })}
currency={state.currency}
locale={state.locale}
value={state.value}
error={state.error}
output={state.output}
allowNegative={state.allowNegative}
disabled={state.disabled}
size={state.size}
showCode={state.showCode}
allowDecimal={state.allowDecimal}
/>
<div style={{ paddingTop: '20px' }}>
<pre>
<code>
{JSON.stringify(
{ ...CurrencyInput.defaultProps, ...state },
null,
4,
)}
</code>
</pre>
</div>
</>
)
}}
</State>
