@deskpro/token-field
v0.8.5
Published
token-field =========== A react-based components to display interactive input
Downloads
465
Readme
token-field
A react-based components to display interactive input
Overview
A Storybook demo is available at https://deskpro.github.io/token-field.
Installation
npm install @deskpro/token-field --save
Usage
Token-field provide a few input types
Props
tokenTypes={object[]}
Pass all available tokens for users to use. These tokens will be offered will typing
Token example
{
id: 'date',
widget: 'DateTimeInput',
props: {},
description: 'Date the ticket was submitted'
}
Or with extra props
{
id: 'attach-size',
widget: 'NumericRangeInput',
props: {
unitPhrase: 'MB',
convertFromValue: value => Math.round(value / 1024 / 1024),
convertToValue: value => value * 1024 * 1024,
}
}
value={object[]}
Initial value of the field
Example value
[
{
type: 'user-message',
value: 'help upgrading'
},
{
type: 'TEXT',
value: 'pricing',
},
{
type: 'user-waiting'
}
]
onChange={function}
Callback to persist changes
Methods
AddTokenAndFocus(id, position = null, defaultValue = undefined)
Allow to add programmatically a token to the field and focus it, position and defaultValue are optional
Styling
src/styles/deskpro-components.scss
has to be imported if @deskpro/react-components
are not in used on your project