Gathering detailed insights and metrics for @sephirothmk/reactstrap-validation-select-typed
Gathering detailed insights and metrics for @sephirothmk/reactstrap-validation-select-typed
React components using Availity UIKit and Bootstrap 4
Installations
npm install @sephirothmk/reactstrap-validation-select-typedDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.15.3
NPM Version
6.13.0
Releases
8
Languages
8
JavaScript
TypeScript
MDX
SCSS
CSS
Handlebars
Shell
HTML
JavaScript (58.36%)
TypeScript (34.71%)
MDX (4.58%)
SCSS (1.6%)
CSS (0.43%)
Handlebars (0.21%)
Shell (0.1%)
HTML (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
53 Stars
4,947 Commits
28 Forks
29 Watchers
65 Branches
62 Contributors
Updated on Jun 04, 2025
Maintainers
1
Package Meta Information
Latest Version
5.3.3
Package Id
@sephirothmk/reactstrap-validation-select-typed@5.3.3
Unpacked Size
80.93 kB
Size
16.64 kB
File Count
18
NPM Version
6.13.0
Node Version
10.15.3
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
8
Peer Dependencies
8
@availity/reactstrap-validation-select
Wrapper for react-select (with async pagination) to work with availity-reactstrap-validation.
Installation
1npx install-peerdeps @availity/reactstrap-validation-select --save
Usage
1import React from 'react'; 2import { Label } from 'reactstrap'; 3import { AvForm, AvGroup, AvFeedback } from 'availity-reactstrap-validation'; 4import AvSelect, { AvSelectField } from '@availity/reactstrap-validation-select'; 5import '@availity/reactstrap-validation-select/styles.scss'; 6// ... 7const options = [ 8 {label: "Option 1", value: 1}, 9 {label: "Option 2", value: 2}, 10 {label: "Option 3", value: 3}, 11]; 12// ... 13<AvForm> 14 <AvGroup> 15 <Label for="justTheInput">My Input Label</Label> 16 <AvSelect 17 name="justTheInput" 18 options={options} 19 required 20 /> 21 <AvFeedback>Some error message</AvFeedback> 22 </AvGroup> 23 24 <AvSelectField 25 name="fieldWithLabel" 26 label="Label Made For Me" 27 options={options} 28 required 29 /> 30</AvForm>;
Note: the input callbacks (e.g. onChange) do not get called with an event like other reactstrap-validation component; just the value of the field. This is because the underlying react-select does not return the event in it's callbacks.
AvSelect (Default export)
This is the underlying select without the AvGroup, Label or AvFeedback
AvSelect Props
Please refer to react-select with async pagination's props and availity-reactstrap-validation's input validation props. This component just combines those.
raw: Boolean. Optional. Default:false. Iftrue, the entire object of the selected value will be returned as the value instead of the value for thevalueKeywithin the object.valueKey: String. Optional. The key of the value you want returned when selected. Default:valuelabelKey: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Defaultlabelautofill: Boolean or Object. Optional. Default:false. Iftrue, when the value of the dropdown changes, if theisMultiprop isfalseand the new value of the dropdown is an object, all fields on the form corresponding to the new value are auto-filled. In order for a field to be auto-filled, thenameproperty on the field must match the key inside the new value.
For example, if the new value is { "payer": "Availity" }, in order for the payer input in the form to be auto-filled to "Availity", the name prop on the input must be "payer".
If autofill is an object, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the keys in the autofill prop will be auto-filled.
When autofill is an object, the values in the object can be a string or a function. When a string, the key in the autofill prop gets auto-filled to that path on the selected option. When a function, it gets called with the selected option, and the key in the autofill prop gets auto-filled to the return value of the function.
For example, if the new value is { "payer": { "name": "Availity", "id": "1" } }, in order for the "payerName", "payerId", and "payerNameAndId" inputs to be auto-filled to "Availity", "1", and "1 - Availity" respectively, the autofill prop should be:
1{ 2 payerName: 'payer.name', 3 payerId: 'payer.id', 4 payerNameAndId: opt => `${opt.payer.id} - ${opt.payer.name}`, 5}
AvSelect Example usage
1import React from 'react'; 2import { Label } from 'reactstrap'; 3import { AvForm, AvGroup, AvFeedback } from 'availity-reactstrap-validation'; 4import AvSelect from '@availity/reactstrap-validation-select'; 5import '@availity/reactstrap-validation-select/styles.scss'; 6// ... 7const options = [ 8 {label: "Option 1", value: 1}, 9 {label: "Option 2", value: 2}, 10 {label: "Option 3", value: 3}, 11]; 12// ... 13<AvForm> 14 <AvGroup> 15 <Label for="justTheInput">My Input Label</Label> 16 <AvSelect 17 name="justTheInput" 18 options={options} 19 required 20 /> 21 <AvFeedback>Some error message</AvFeedback> 22 </AvGroup> 23</AvForm>;
AvSelectField
Please refer to react-select with async pagination's props and availity-reactstrap-validation's field validation props. This component just combines those.
AvSelectField Props
Please refer to react-select with async pagination's props and availity-reactstrap-validation's input validation props. This component just combines those.
raw: Boolean. Optional. Default:false. Iftrue, the entire object of the selected value will be returned as the value instead of the value for thevalueKeywithin the object.valueKey: String. Optional. The key of the value you want returned when selected. Default:valuelabelKey: String. Optional. The key for the label you want to appear in the dropdown for the user to see. DefaultlabelgroupClass: String. Optional. ClassName to add to the wrapping AvGrouplabelClass: String. Optional. ClassName to add to the labelfeedbackClass: String. Optional. ClassName to add to the AvFeedbackcreatable: boolean. Optional. Whether or not to allow new items to be created if not found.autofill: Boolean or Object. Optional. Default:false. Iftrue, when the value of the dropdown changes, if theisMultiprop isfalseand the new value of the dropdown is an object, all fields on the form corresponding to the new value are auto-filled. In order for a field to be auto-filled, thenameproperty on the field must match the key inside the new value.
For example, if the new value is { "payer": "Availity" }, in order for the payer input in the form to be auto-filled to "Availity", the name prop on the input must be "payer".
If autofill is an object, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the keys in the autofill prop will be auto-filled.
When autofill is an object, the values in the object can be a string or a function. When a string, the key in the autofill prop gets auto-filled to that path on the selected option. When a function, it gets called with the selected option, and the key in the autofill prop gets auto-filled to the return value of the function.
For example, if the new value is { "payer": { "name": "Availity", "id": "1" } }, in order for the "payerName", "payerId", and "payerNameAndId" inputs to be auto-filled to "Availity", "1", and "1 - Availity" respectively, the autofill prop should be:
1{ 2 payerName: 'payer.name', 3 payerId: 'payer.id', 4 payerNameAndId: opt => `${opt.payer.id} - ${opt.payer.name}`, 5}
AvSelectField Example usage
1import React from 'react'; 2import { AvSelectField } from '@availity/reactstrap-validation-select'; 3import '@availity/reactstrap-validation-select/styles.scss'; 4// ... 5const options = [ 6 {label: "Option 1", value: 1}, 7 {label: "Option 2", value: 2}, 8 {label: "Option 3", value: 3}, 9]; 10// ... 11<AvForm> 12 <AvSelectField 13 name="fieldWithLabel" 14 label="Label Made For Me" 15 options={options} 16 required 17 /> 18</AvForm>;
AvResourceSelect
A select list which automatically loads and pages though a resource when the user scrolls down.
The search field will fire a request after the debounce timer (see debounceTimeout prop) using the given resource prop with the payload:
1{ 2 limit: "50", //limit quantity can be changed with `itemsPerPage` prop 3 offset: "0", 4 q: "user typed search text after debounce" 5}
AvResourceSelect Props
Please refer to react-select-async-paginate's props and availity-reactstrap-validation's input validation props. This component just combines those.
raw: Boolean. Optional. Default:true. Iftrue, the entire object of the selected value will be returned as the value instead of the value for thevalueKeywithin the object.valueKey: String. Optional. The key of the value you want returned when selected. Default:valuelabelKey: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Defaultlabellabel: String. Optional. If provided, the rendered component will mimicAvSelectFieldinstead ofAvSelect(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 derivecacheUniqifcacheUniqprop 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 todebounceTimeoutifdebounceTimeoutis 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,AvResourceSelectwill attempt to retrieve the next page of results.response.datafrom axios response is passed as the only argument tohasMorewhenhasMoreis a function. Defaults to:({ totalCount, limit, offset }) => totalCount > offset + limit;for non-GraphQL apis. Defaults to(data) => data.data[${this.props.graphqlConfig.type}Pagination].pageInfo.hasNextPagefor GraphQL apis.additional: Object. Optional. Additional properties to pass toAsyncPaginate(see react-select-async-paginate).graphqlConfig: Object{ type, query }. Optional.typeString. is the type of asset returned.queryString. is the GraphQL query to use in the request.creatable: boolean. Optional. Whether or not to allow new items to be created if not found.minCharsToSearch: Number. Optional. The minimum number of characters the user must input beforeAvResourceSelectmakes the network request. If the user has not inputted any characters, the network request will still be made. Useful for relieving pressure on the api theresourceis calling.waitUntilFocused: Boolean. Optional. When true, the network request is not made until the dropdown has been focused.autofill: Boolean or Object. Optional. Default:false. Iftrue, when the value of the dropdown changes, if theisMultiprop isfalseand the new value of the dropdown is an object, all fields on the form corresponding to the new value are auto-filled. In order for a field to be auto-filled, thenameproperty on the field must match the key inside the new value.
For example, if the new value is { "payer": "Availity" }, in order for the payer input in the form to be auto-filled to "Availity", the name prop on the input must be "payer".
If autofill is an object, when the value of the dropdown changes, if the isMulti prop is false and the new value of the dropdown is an object, all fields on the form corresponding to the keys in the autofill prop will be auto-filled.
When autofill is an object, the values in the object can be a string or a function. When a string, the key in the autofill prop gets auto-filled to that path on the selected option. When a function, it gets called with the selected option, and the key in the autofill prop gets auto-filled to the return value of the function.
For example, if the new value is { "payer": { "name": "Availity", "id": "1" } }, in order for the "payerName", "payerId", and "payerNameAndId" inputs to be auto-filled to "Availity", "1", and "1 - Availity" respectively, the autofill prop should be:
1{ 2 payerName: 'payer.name', 3 payerId: 'payer.id', 4 payerNameAndId: opt => `${opt.payer.id} - ${opt.payer.name}`, 5}
AvResourceSelect Example usage
1import React from 'react'; 2import AvApi from '@availity/api-axios'; 3import { AvResourceSelect } from '@availity/reactstrap-validation-select'; 4import '@availity/reactstrap-validation-select/styles.scss'; 5// ... 6const avCustomResource = new AvApi({ name: 'my-custom-resource' }); 7// ... 8<AvForm> 9 <AvResourceSelect 10 name="fieldWithLabel" 11 label="Label Made For Me" 12 resource={avCustomResource} 13 required 14 /> 15</AvForm>;
Pre-made Resource Selects
The follow components exist and can be imported by name from @availity/reactstrap-validation-select/resources
- AvProviderSelect
- AvOrganizationSelect
- AvRegionSelect
- AvPermissionSelect
- AvNavigationSelect
- AvUserSelect
These components are AvResourceSelect with pre-configured resource, valueKey, and labelKey to make it easy to use. All of the props for AvResourceSelect can be provided to override the defaults of these pre-made components. For some of the component you will want to provide the customerId prop.
Pre-made Resource Selects Example Usage
1import React from 'react'; 2import AvApi from '@availity/api-axios'; 3import { 4 AvProviderSelect, 5 AvOrganizationSelect, 6 AvRegionSelect, 7 AvPermissionSelect, 8 AvNavigationSelect, 9 AvUserSelect, 10 AvPatientSelect, 11} from '@availity/reactstrap-validation-select/resources'; 12import '@availity/reactstrap-validation-select/styles.scss'; 13// ... 14<AvForm> 15 <AvRegionSelect 16 name="region" 17 label="Select a Region" 18 required 19 /> 20 <AvOrganizationSelect 21 name="organization" 22 label="Select a Organization" 23 required 24 /> 25 <AvProviderSelect 26 name="provider" 27 customerId="1234" 28 requiredParams={['customerId']} 29 watchParams={['customerId']} 30 label="Select a provider" 31 customerId={customerId} 32 required 33 /> 34 <AvPermissionSelect 35 name="permissions" 36 label="Select a provider" 37 customerId={customerId} 38 isMulti 39 required 40 /> 41 <AvNavigationSelect 42 name="payerSpace" 43 label="Select a Payer Space" 44 customerId={customerId} 45 required 46 /> 47 <AvUserSelect 48 name="user" 49 label="Select a User" 50 customerId={customerId} 51 /> 52 <AvPatientSelect 53 name="patient" 54 label="Select a Patient" 55 parameters={{ 56 customerId, 57 }} 58 /> 59</AvForm>;
No vulnerabilities found.
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
SAST tool is run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Info: all commits (9) are checked with a SAST tool
Reason
6 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql-analysis.yml:28
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql-analysis.yml:29
- Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1
- Warn: no topLevel permission defined: .github/workflows/commitlint.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy.yml:1
- Warn: no topLevel permission defined: .github/workflows/pr-build.yml:1
- Info: no jobLevel write permissions found
Reason
Found 2/24 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commitlint.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/commitlint.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commitlint.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/commitlint.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/commitlint.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/commitlint.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/deploy.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/deploy.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/deploy.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/deploy.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/deploy.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/deploy.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-build.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/pr-build.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-build.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/pr-build.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-build.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/pr-build.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-build.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/pr-build.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-build.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/Availity/availity-react/pr-build.yml/master?enable=pin
- Info: 0 out of 12 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 6 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Score
4.9
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More