@availity/select v4.1.2
@availity/select
Wrapper for react-select-async-paginate to work with formik
Installation
npm install @availity/select @availity/api-axios @availity/api-core @availity/form formik react reactstrap --save
Validation
See yup and @availity/yup
Select (Default Export)
Select dropdown without a Label
or Feedback
Select Usage
import React from 'react';
import { Form } from '@availity/form';
import Select from '@availity/select';
import * as yup from 'yup';
import '@availity/yup';
// ...
const schema = yup.object().shape({
justTheInput: yup.string().required('This field is required.'),
});
const options = [
{label: "Option 1", value: 1},
{label: "Option 2", value: 2},
{label: "Option 3", value: 3},
];
return (
<Form
initialValues={{
justTheInput: undefined,
}}
onSubmit={values => apiResource.submit(values)}
validationSchema={schema}
>
<Select
id="justTheInput"
name="justTheInput"
isMulti={false}
options={options}
/>
<Button color="primary" type="submit">
Submit
</Button>
</Form>
);
Select Props
See react-select-async-paginate for additional props
name
: String. Required. The name of the field. Will be the key of the selected option(s) that come through in the values of theonSubmit
callback.raw
: Boolean. Optional. Default:false
. Iftrue
, the entire object of the selected value will be returned as the value instead of the value for thevalueKey
within the object.valueKey
: String. Optional. The key of the value you want returned when selected. Default:value
labelKey
: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Defaultlabel
maxLength
: Number. Optional. The maximum number of options that can be selected (whenisMulti
is true)selectRef
: Function or Node. Optional. Ref passed toreact-select-async-paginate
componentclassName
: Additional styles to be added to the<Select />
SelectField
The same as Select
but with a Label
that appears above the input and a Feedback
that appears below the input.
SelectField Usage
import React from 'react';
import { Form } from '@availity/form';
import { SelectField } from '@availity/select';
import * as yup from 'yup';
import '@availity/yup';
// ...
const schema = yup.object().shape({
justTheInput: yup
.array()
.of(yup.string())
.min(min, 'Must select at least 2 options')
.max(max, 'Cannot select more than 4 options')
.required('This field is required.'),
});
const options = [
{label: "Option 1", value: 1},
{label: "Option 2", value: 2},
{label: "Option 3", value: 3},
];
return (
<Form
initialValues={{
selectWithLabel: undefined,
}}
onSubmit={values => apiResource.submit(values)}
validationSchema={schema}
>
<SelectField
label="Select a value"
id="selectWithLabel"
name="selectWithLabel"
isMulti
options={options}
/>
<Button color="primary" type="submit">
Submit
</Button>
</Form>
);
SelectField Props
Same as Select
, with the following additional props:
label
: Node. Optional. The label to render above theSelect
inputlabelHidden
: Boolean. Optional. Whether thelabel
should be hiddenlabelClass
: String. Optional. classNames to pass to theLabel
feedbackClass
: String. Optional. classNames to pass to theFeedback
groupClass
: String. Optional. classNames to pass to theFormGroup
ResourceSelect
A select list which automatically loads and pages through a resource when the user scrolls down.
ResourceSelect Usage
import React from 'react';
import { Form } from '@availity/form';
import { ResourceSelect } from '@availity/select';
import * as yup from 'yup';
import '@availity/yup';
// ...
const schema = yup.object().shape({
resourceSelect: yup.string().required('This field is required.'),
});
const avCustomResource = new AvApi({ name: 'my-custom-resource' });
return (
<Form
initialValues={{
resourceSelect: '',
}}
onSubmit={values => apiResource.submit(values)}
validationSchema={schema}
>
<ResourceSelect
id="resourceSelect"
name="resourceSelect"
resource={avCustomResource}
isMulti={false}
/>
<Button color="primary" type="submit">
Submit
</Button>
</Form>
);
ResourceSelect Props
See react-select-async-paginate for additional props
raw
: Boolean. Optional. Default:true
. Iftrue
, the entire object of the selected value will be returned as the value instead of the value for thevalueKey
within the object.valueKey
: String. Optional. The key of the value you want returned when selected. Default:value
labelKey
: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Defaultlabel
label
: String. Optional. If provided, the rendered component will mimicSelectField
instead ofSelect
(it will create a group with a label and feedback).requestConfig
: Object. Optional. Configuration object which will be used with the query method on the resource. Useful for defining headers to be sent with the request.parameters
: Object. Optional. Object which will be used to create querystring parameters in the request.customerId
: String. Optional. The value of the customer ID which will be sent in the parameters. Useful for restricting the loaded options to be related to the organization the user has in context.requiredParams
: Array of strings. Optional. If present, the network request will not be made until all of the required parameters specified in the array have a truthy value.cacheUniq
: Any. Optional. When this prop changes, all cache options are cleared. (see react-select-async-paginate)watchParams
: Array of strings. Optional. If present, the options will reset when any of the parameters specified in the array change value. This is useful for when a customerId changes and you need to load a new list of options for the user to choose from. Used to derivecacheUniq
ifcacheUniq
prop is not provided.resource
: Availity API resource (see @availity/api-core and @availity/api-axios). Required.getResult
: String or Function. Optional. When a function, the function will be called with the API response body/payload and is expected to return an array containing the list of items for the page. When a string, the string is expected to be a simple key used to get the value from the response ("simple" meaning not handling dot-notation for nested objects, if you need that provide a function.)debounceTimeout
: Number. default: 350. The amount of time (in milliseconds) to wait after the user has stopped typing before making the network request (debounced input).delay
: Number. Default:350
. Set todebounceTimeout
ifdebounceTimeout
is not provided. (see react-select-async-paginate)itemsPerPage
: Number. Optional. Default:50
. The number of items to fetched be displayed per page when the usr scrolls down.onPageChange
: Function. Optional. A callback function to inform you that the user has scrolled to the bottom of the list and more items are loaded. The current input value and the page the user wants to go to will be provided as arguments to the callback function.hasMore
: Boolean or Function. Optional. If true,ResourceSelect
will attempt to retrieve the next page of results.response.data
from axios response is passed as the only argument tohasMore
whenhasMore
is a function. Defaults to:({ totalCount, limit, offset }) => totalCount > offset + limit;
additional
: Object. Optional. Additional properties to pass toAsyncPaginate
(see react-select-async-paginate).
Pre-made Resource Selects
The follow components exist and can be imported by name from @availity/select/resources
- AvProviderSelect
- AvOrganizationSelect
- AvRegionSelect
- AvPermissionSelect
- AvNavigationSelect
- AvUserSelect
These components are ResourceSelect
with pre-configured resource
, valueKey
, and labelKey
to make it easy to use. All of the props for ResourceSelect
can be provided to override the defaults of these pre-made components. For some of the components you will want to provide the customerId
prop.
Pre-made Resource Selects Example Usage
import React from 'react';
import AvApi from '@availity/api-axios';
import { Form } from '@availity/form';
import {
AvProviderSelect,
AvOrganizationSelect,
AvRegionSelect,
AvPermissionSelect,
AvNavigationSelect,
AvUserSelect,
} from '@availity/select/resources';
const schema = yup.object().shape({
AvProviderSelect: yup.string().required('This field is required.'),
AvOrganizationSelect: yup.string().required('This field is required.'),
AvRegionSelect: yup.string().required('This field is required.'),
AvPermissionSelect: yup.string().required('This field is required.'),
AvNavigationSelect: yup.string().required('This field is required.'),
AvUserSelect: yup.string().required('This field is required.'),
});
// ...
<Form
initialValues={{
AvProviderSelect: null,
AvOrganizationSelect: null,
AvRegionSelect: null,
AvPermissionSelect: null,
AvNavigationSelect: null,
AvUserSelect: null,
}}
onSubmit={values => apiResource.submit(values)}
validationSchema={schema}
>
<AvProviderSelect
name="provider"
customerId="1234"
requiredParams={['customerId']}
watchParams={['customerId']}
label="Select a provider"
customerId={customerId}
required
/>
<AvOrganizationSelect
name="organization"
label="Select a Organization"
required
/>
<AvRegionSelect
name="region"
label="Select a Region"
required
/>
<AvPermissionSelect
name="permissions"
label="Select a provider"
customerId={customerId}
isMulti
required
/>
<AvNavigationSelect
name="payerSpace"
label="Select a Payer Space"
customerId={customerId}
required
/>
<AvUserSelect
name="user"
label="Select a User"
customerId={customerId}
/>
</Form>;
7 days ago
2 months ago
5 months ago
6 months ago
6 months ago
7 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago