Gathering detailed insights and metrics for @axa-fr/react-toolkit-form-input-select-multi
Gathering detailed insights and metrics for @axa-fr/react-toolkit-form-input-select-multi
Flexible components html + css + react using BEM convention. Maybe, you can call it "Design System" !
Installations
npm install @axa-fr/react-toolkit-form-input-select-multiDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.18.0
NPM Version
lerna/3.22.1/node@v20.18.0+x64 (linux)
Score
59
Supply Chain
86.2
Quality
86.9
Maintenance
100
Vulnerability
98.9
License
Releases
9
Contributors
45
Unable to fetch Contributors
Languages
7
TypeScript
SCSS
JavaScript
CSS
MDX
HTML
Handlebars
TypeScript (64.09%)
SCSS (28.04%)
JavaScript (4.16%)
CSS (2.49%)
MDX (0.98%)
HTML (0.14%)
Handlebars (0.1%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
41,616
Last Day
12
Last Week
82
Last Month
556
Last Year
4,754
GitHub Statistics
MIT License
97 Stars
682 Commits
62 Forks
17 Watchers
26 Branches
45 Contributors
Updated on Nov 15, 2024
Bundle Size
102.64 kB
Minified
33.03 kB
Minified + Gzipped
Maintainers
7
Package Meta Information
Latest Version
3.0.2
Package Id
@axa-fr/react-toolkit-form-input-select-multi@3.0.2
Unpacked Size
58.74 kB
Size
10.86 kB
File Count
35
NPM Version
lerna/3.22.1/node@v20.18.0+x64 (linux)
Node Version
20.18.0
Published on
Nov 15, 2024
Total Downloads
Cumulative downloads
Total Downloads
41,616
Last Day
0%
12
Compared to previous day
Last Week
7.9%
82
Compared to previous week
Last Month
89.8%
556
Compared to previous month
Last Year
-48.7%
4,754
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
@axa-fr/react-toolkit-form-input-select-multi
MultiSelect
Installation
1npm i @axa-fr/react-toolkit-form-input-select-multi 2npm i @axa-fr/react-toolkit-form-core
Import
1import { MultiSelect } from '@axa-fr/react-toolkit-form-input-select-multi'; 2import '@axa-fr/react-toolkit-form-input-select-multi/dist/af-select.css'; 3import { HelpMessage } from '@axa-fr/react-toolkit-form-core'; 4import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
1const options = [ 2 { value: 'fun', label: 'For fun', clearableValue: false }, 3 { value: 'work', label: 'For work' }, 4 { value: 'drink', label: 'For drink' }, 5 { value: 'sleep', label: 'For sleep' }, 6 { value: 'swim', label: 'For swim' }, 7]; 8 9const values = ['fun', 'drink']; 10 11const MultiSelectInput = () => ( 12 <form className="af-form" name="myform"> 13 <MultiSelect 14 name="multiSelectName" 15 onChange={(e) => console.log(e)} 16 options={options} 17 values={values} 18 placeholder="Select" 19 /> 20 <HelpMessage message="Enter the place name, ex : Webcenter" /> 21 </form> 22); 23export default MultiSelectInput;
MultiSelectInput
Installation
1npm i @axa-fr/react-toolkit-form-input-select-multi 2npm i @axa-fr/react-toolkit-form-core
Import
1import { MultiSelectInput } from '@axa-fr/react-toolkit-form-input-select-multi'; 2import '@axa-fr/react-toolkit-form-input-select-multi/dist/af-select.css'; 3import { MessageTypes } from '@axa-fr/react-toolkit-form-core'; 4import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
1const options = [ 2 { value: 'fun', label: 'For fun', clearableValue: false }, 3 { value: 'work', label: 'For work' }, 4 { value: 'drink', label: 'For drink' }, 5 { value: 'sleep', label: 'For sleep' }, 6 { value: 'swim', label: 'For swim' }, 7]; 8 9const values = ['fun', 'drink']; 10 11const MultiSelectInputReturn = () => ( 12 <form className="af-form" name="myform"> 13 <MultiSelectInput 14 id="uniqueId" 15 label="Place type" 16 name="multiSelectInputName" 17 onChange={(e) => console.log(e)} 18 options={options} 19 values={values} 20 helpMessage="Enter the place type" 21 messageType={MessageTypes.error} 22 placeholder="Select" 23 classNameContainerLabel="col-md-2" 24 classNameContainerInput="col-md-10" 25 /> 26 </form> 27); 28 29export default MultiSelectInputReturn;
MultiSelectInput Required
To achieve MultiSelectInput Required, you need to add this :
1classModifier = 'required';
to the MultiSelectInput component
MultiSelect One Value
Installation
1npm i @axa-fr/react-toolkit-form-input-select-multi 2npm i @axa-fr/react-toolkit-form-core
Import
1import { MultiSelect } from '@axa-fr/react-toolkit-form-input-select-multi'; 2import '@axa-fr/react-toolkit-form-input-select-multi/dist/af-select.css'; 3import { HelpMessage } from '@axa-fr/react-toolkit-form-core'; 4import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
1const options = [ 2 { value: 'fun', label: 'For fun', clearableValue: false }, 3 { value: 'work', label: 'For work' }, 4 { value: 'drink', label: 'For drink' }, 5 { value: 'sleep', label: 'For sleep' }, 6 { value: 'swim', label: 'For swim' }, 7]; 8 9const MultiSelectOneValue = () => ( 10 <form className="af-form" name="myform"> 11 <MultiSelectInput 12 id="uniqueId" 13 label="Place type" 14 name="placeType" 15 options={options} 16 onChange={() => { 17 console.log('your function'); 18 }} 19 values={['fun']} 20 helpMessage="Enter the place type" 21 messageType={MessageTypes.error} 22 forceDisplayMessage={false} 23 placeholder="Select" 24 classNameContainerLabel="col-md-2" 25 classNameContainerInput="col-md-10" 26 /> 27 <h2 className="af-subtitle">Something Bellow</h2> 28 </form> 29); 30export default MultiSelectOneValue;
No vulnerabilities found.
No security vulnerabilities found.