UNPKG

react-country-state-city

Version:

A lightweight and easy-to-use React library that provides a comprehensive list of regions or continents, countries, states, cities languages, and country phone codes for creating dynamic and searchable dropdowns. Ideal for building forms and input fields

3 lines (2 loc) 16.2 kB
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).ReactCountryStateCity={},e.React)}(this,(function(e,n){"use strict";var t=function(){return t=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},t.apply(this,arguments)};function a(e,n){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&n.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)n.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(t[a[o]]=e[a[o]])}return t}function o(e,n,t,a){return new(t||(t=Promise))((function(o,i){function r(e){try{s(a.next(e))}catch(e){i(e)}}function c(e){try{s(a.throw(e))}catch(e){i(e)}}function s(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(r,c)}s((a=a.apply(e,n||[])).next())}))}function i(e,n){var t,a,o,i,r={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(s){return function(c){if(t)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(r=0)),r;)try{if(t=1,a&&(o=2&c[0]?a.return:c[0]?a.throw||((o=a.return)&&o.call(a),0):a.next)&&!(o=o.call(a,c[1])).done)return o;switch(a=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return r.label++,{value:c[1],done:!1};case 5:r.label++,a=c[1],c=[0];continue;case 7:c=r.ops.pop(),r.trys.pop();continue;default:if(!(o=r.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){r=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){r.label=c[1];break}if(6===c[0]&&r.label<o[1]){r.label=o[1],o=c;break}if(o&&r.label<o[2]){r.label=o[2],r.ops.push(c);break}o[2]&&r.ops.pop(),r.trys.pop();continue}c=n.call(e,r)}catch(e){c=[6,e],a=0}finally{t=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,s])}}}var r=function(e){return o(void 0,void 0,void 0,(function(){var n;return i(this,(function(t){switch(t.label){case 0:return n="https://venkatmcajj.github.io/react-country-state-city/data/regionsminified.json",e&&(n=e+"/regionsminified.json"),[4,fetch(n).then((function(e){return e.json()}))];case 1:return[2,t.sent()]}}))}))},c=function(e,n){return o(void 0,void 0,void 0,(function(){var t,a,o;return i(this,(function(i){switch(i.label){case 0:return t="https://venkatmcajj.github.io/react-country-state-city/data/countriesminified.json",n&&(t=n+"/countriesminified.json"),[4,fetch(t).then((function(e){return e.json()}))];case 1:return a=i.sent(),o=a,e&&(o=o.filter((function(n){return n.region===e}))),[2,o]}}))}))},s=function(e){return o(void 0,void 0,void 0,(function(){var n;return i(this,(function(t){switch(t.label){case 0:return n="https://venkatmcajj.github.io/react-country-state-city/data/countriesminified.json",e&&(n=e+"/countriesminified.json"),[4,fetch(n).then((function(e){return e.json()}))];case 1:return[2,t.sent()]}}))}))},u=function(e){return o(void 0,void 0,void 0,(function(){var n;return i(this,(function(t){switch(t.label){case 0:return n="https://venkatmcajj.github.io/react-country-state-city/data/languagesminified.json",e&&(n=e+"/languagesminified.json"),[4,fetch(n).then((function(e){return e.json()}))];case 1:return[2,t.sent()]}}))}))},l=function(e,n){return o(void 0,void 0,void 0,(function(){var t,a,o;return i(this,(function(i){switch(i.label){case 0:return t="https://venkatmcajj.github.io/react-country-state-city/data/statesminified.json",n&&(t=n+"/statesminified.json"),[4,fetch(t).then((function(e){return e.json()}))];case 1:return a=i.sent(),o=a.find((function(n){return n.id===e})),[2,o&&o.states?o.states:[]]}}))}))},f=function(e,n,t){return o(void 0,void 0,void 0,(function(){var a,o,r,c,s;return i(this,(function(i){switch(i.label){case 0:return a="https://venkatmcajj.github.io/react-country-state-city/data/citiesminified.json",t&&(a=t+"/citiesminified.json"),[4,fetch(a).then((function(e){return e.json()}))];case 1:return o=i.sent(),(r=o.find((function(n){return n.id===e})))?(c=r&&r.states?r.states:[],[2,(s=c.find((function(e){return e.id===n})))&&s.cities?s.cities:[]]):[2,[]]}}))}))},d=function(){return n.createElement("svg",{height:"20",width:"20",viewBox:"0 0 20 20"},n.createElement("path",{d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"}))},m=function(e){var o=e.placeHolder,i=e.options,r=e.onChange,c=e.inputClassName,s=e.onTextChange,u=e.defaultValue,l=e.showFlag,f=void 0===l||l,m=a(e,["placeHolder","options","onChange","inputClassName","onTextChange","defaultValue","showFlag"]),h=n.useState(!1),p=h[0],v=h[1],g=n.useState(),C=g[0],w=g[1],y=n.useState(""),E=y[0],N=y[1],j=n.useRef(null),b=n.useRef(null);n.useEffect((function(){if(u)if("string"==typeof u)(e=i.find((function(e){return e.name===u})))&&w(e);else if("number"==typeof u){var e;(e=i.find((function(e){return e.id===u})))&&w(e)}else w(u)}),[u,i]),n.useEffect((function(){N(""),p&&j.current&&j.current.focus()}),[p]),n.useEffect((function(){var e=function(e){b.current&&!b.current.contains(e.target)&&v(!1)};return window.addEventListener("click",e),function(){window.removeEventListener("click",e)}}));var x=function(e){return!!C&&C.id===e.id};return n.createElement("div",{className:"stdropdown-container"},n.createElement("div",{ref:b,onClick:function(){v(!0)},className:"stdropdown-input stsearch-box"},n.createElement("input",t({},m,{className:c,onChange:function(e){N(e.target.value),w(void 0),s&&s(e)},value:C?"".concat(f&&"emoji"in C?C.emoji+" ":"").concat(C.name):E||"",placeholder:o,ref:j})),n.createElement("div",{className:"stdropdown-tools"},n.createElement("div",{className:"stdropdown-tool"},n.createElement(d,null)))),p&&n.createElement("div",{className:"stdropdown-menu"},(E?i.filter((function(e){return e.name.toLowerCase().indexOf(E.toLowerCase())>=0})):i).map((function(e){return n.createElement("div",{onClick:function(){return function(e){w(e),r(e)}(e)},key:e.id,className:"".concat("stdropdown-item"," ").concat(x(e)&&"selected")},f&&n.createElement("span",{className:"stdropdown-flag"},"emoji"in e?e.emoji:""," "),e.name)}))))},h=function(){return n.createElement("svg",{height:"20",width:"20",viewBox:"0 0 20 20"},n.createElement("path",{d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"}))},p=function(e){var o=e.placeHolder,i=e.options,r=e.onChange,c=e.inputClassName,s=e.onTextChange,u=e.defaultValue,l=e.displayNative,f=a(e,["placeHolder","options","onChange","inputClassName","onTextChange","defaultValue","displayNative"]),d=n.useState(!1),m=d[0],p=d[1],v=n.useState(),g=v[0],C=v[1],w=n.useState(""),y=w[0],E=w[1],N=n.useRef(null),j=n.useRef(null);n.useEffect((function(){if(u)if("string"==typeof u){var e=i.find((function(e){return e.name===u}));e&&C(e)}else C(u)}),[u,i]),n.useEffect((function(){E(""),m&&N.current&&N.current.focus()}),[m]),n.useEffect((function(){var e=function(e){j.current&&!j.current.contains(e.target)&&p(!1)};return window.addEventListener("click",e),function(){window.removeEventListener("click",e)}}));var b=function(e){return!!g&&g.code===e.code};return n.createElement("div",{className:"stdropdown-container"},n.createElement("div",{ref:j,onClick:function(){p(!0)},className:"stdropdown-input stsearch-box"},n.createElement("input",t({},f,{className:c,onChange:function(e){E(e.target.value),C(void 0),s&&s(e)},value:g?"".concat(l?g.native:g.name):y||"",placeholder:o,ref:N})),n.createElement("div",{className:"stdropdown-tools"},n.createElement("div",{className:"stdropdown-tool"},n.createElement(h,null)))),m&&n.createElement("div",{className:"stdropdown-menu"},(y?i.filter((function(e){return e.name.toLowerCase().indexOf(y.toLowerCase())>=0||e.native.toLowerCase().indexOf(y.toLowerCase())>=0})):i).map((function(e){return n.createElement("div",{onClick:function(){return function(e){C(e),r(e)}(e)},key:e.code,className:"".concat("stdropdown-item"," ").concat(b(e)&&"selected")},l?e.native:e.name)}))))},v=function(){return n.createElement("svg",{height:"20",width:"20",viewBox:"0 0 20 20"},n.createElement("path",{d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"}))},g=function(e){var o=e.placeHolder,i=e.options,r=e.onChange,c=e.inputClassName,s=e.onTextChange,u=e.defaultValue,l=e.showFlag,f=void 0===l||l,d=a(e,["placeHolder","options","onChange","inputClassName","onTextChange","defaultValue","showFlag"]),m=n.useState(!1),h=m[0],p=m[1],g=n.useState(),C=g[0],w=g[1],y=n.useState(""),E=y[0],N=y[1],j=n.useRef(null),b=n.useRef(null);n.useEffect((function(){if(u)if("string"==typeof u){var e=i.find((function(e){return e.name===u||e.phone_code===u}));e&&w(e)}else w(u)}),[u,i]),n.useEffect((function(){N(""),h&&j.current&&j.current.focus()}),[h]),n.useEffect((function(){var e=function(e){b.current&&!b.current.contains(e.target)&&p(!1)};return window.addEventListener("click",e),function(){window.removeEventListener("click",e)}}));var x=function(e){return!!C&&C.id===e.id};return n.createElement("div",{className:"stdropdown-container"},n.createElement("div",{ref:b,onClick:function(){p(!0)},className:"stdropdown-input stsearch-box"},n.createElement("input",t({},d,{className:c,onChange:function(e){N(e.target.value),w(void 0),s&&s(e)},value:C?"".concat(f&&"emoji"in C?C.emoji+" ":"","+").concat(C.phone_code):E||"",placeholder:o,ref:j})),n.createElement("div",{className:"stdropdown-tools"},n.createElement("div",{className:"stdropdown-tool"},n.createElement(v,null)))),h&&n.createElement("div",{className:"stdropdown-menu"},(E?i.filter((function(e){return e.name.toLowerCase().indexOf(E.toLowerCase())>=0||e.phone_code.indexOf(E)>=0||("+"+e.phone_code).indexOf(E)>=0})):i).map((function(e){return n.createElement("div",{onClick:function(){return function(e){w(e),r(e)}(e)},key:e.id,className:"".concat("stdropdown-item"," ").concat(x(e)&&"selected")},f&&n.createElement("span",{className:"stdropdown-flag"},"emoji"in e?e.emoji:""," "),"+",e.phone_code)}))))};e.CitySelect=function(e){var o=e.containerClassName,i=e.inputClassName,r=e.onTextChange,c=e.defaultValue,s=e.onChange,u=e.countryid,l=e.stateid,d=e.placeHolder,h=e.src,p=a(e,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","countryid","stateid","placeHolder","src"]),v=n.useState([]),g=v[0],C=v[1];return n.useEffect((function(){u&&f(u,l,h).then((function(e){C(e)}))}),[u,l,h]),n.createElement(n.Fragment,null,n.createElement("div",{className:o,style:{position:"relative"}},n.createElement(m,t({},p,{placeHolder:d,options:g,onChange:function(e){s&&s(e)},onTextChange:r,defaultValue:c,inputClassName:i}))))},e.CountrySelect=function(e){var o=e.containerClassName,i=e.inputClassName,r=e.onTextChange,u=e.defaultValue,l=e.onChange,f=e.placeHolder,d=e.showFlag,h=e.region,p=e.src,v=a(e,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","showFlag","region","src"]),g=n.useState([]),C=g[0],w=g[1];return n.useEffect((function(){h?c(h,p).then((function(e){w(e)})):s(p).then((function(e){w(e)}))}),[h,p]),n.createElement(n.Fragment,null,n.createElement("div",{className:o,style:{position:"relative"}},n.createElement(m,t({},v,{placeHolder:f,options:C,onChange:function(e){l&&l(e)},showFlag:d,onTextChange:r,defaultValue:u,inputClassName:i}))))},e.GetAllCities=function(e){return o(void 0,void 0,void 0,(function(){var n,t,a,o,r,c,s,u,l,f,d,m;return i(this,(function(i){switch(i.label){case 0:return n="https://venkatmcajj.github.io/react-country-state-city/data/citiesminified.json",e&&(n=e+"/citiesminified.json"),[4,fetch(n).then((function(e){return e.json()}))];case 1:for(t=i.sent(),a=[],o=0,r=t;o<r.length;o++)for(c=r[o],s=0,u=c.states;s<u.length;s++)for(l=u[s],f=0,d=l.cities;f<d.length;f++)m=d[f],a.push(m);return[2,a]}}))}))},e.GetCity=f,e.GetCountries=s,e.GetCountriesByRegion=c,e.GetLanguages=u,e.GetPhonecodes=function(e){return o(void 0,void 0,void 0,(function(){var n,t;return i(this,(function(a){switch(a.label){case 0:return n="https://venkatmcajj.github.io/react-country-state-city/data/countriesminified.json",e&&(n=e+"/countriesminified.json"),[4,fetch(n).then((function(e){return e.json()}))];case 1:return t=a.sent(),[2,t.map((function(e){return{id:e.id,name:e.name,phone_code:e.phone_code,region:e.region}}))]}}))}))},e.GetPhonecodesByRegion=function(e,n){return o(void 0,void 0,void 0,(function(){var t,a,o;return i(this,(function(i){switch(i.label){case 0:return t="https://venkatmcajj.github.io/react-country-state-city/data/countriesminified.json",n&&(t=n+"/countriesminified.json"),[4,fetch(t).then((function(e){return e.json()}))];case 1:return a=i.sent(),o=a,e&&(o=o.filter((function(n){return n.region===e}))),[2,o.map((function(e){return{id:e.id,name:e.name,phone_code:e.phone_code,region:e.region}}))]}}))}))},e.GetRegions=r,e.GetState=l,e.LanguageSelect=function(e){var o=e.containerClassName,i=e.inputClassName,r=e.onTextChange,c=e.defaultValue,s=e.onChange,l=e.placeHolder,f=e.displayNative,d=e.src,m=a(e,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","displayNative","src"]),h=n.useState([]),v=h[0],g=h[1];return n.useEffect((function(){u(d).then((function(e){g(e)}))}),[d]),n.createElement(n.Fragment,null,n.createElement("div",{className:o,style:{position:"relative"}},n.createElement(p,t({},m,{placeHolder:l,options:v,onChange:function(e){s&&s(e)},displayNative:f,onTextChange:r,defaultValue:c,inputClassName:i}))))},e.PhonecodeSelect=function(e){var o=e.containerClassName,i=e.inputClassName,r=e.onTextChange,u=e.defaultValue,l=e.onChange,f=e.placeHolder,d=e.showFlag,m=e.region,h=e.src,p=a(e,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","showFlag","region","src"]),v=n.useState([]),C=v[0],w=v[1];return n.useEffect((function(){m?c(m,h).then((function(e){w(e)})):s(h).then((function(e){w(e)}))}),[m,h]),n.createElement(n.Fragment,null,n.createElement("div",{className:o,style:{position:"relative"}},n.createElement(g,t({},p,{placeHolder:f,options:C,onChange:function(e){l&&l(e)},showFlag:d,onTextChange:r,defaultValue:u,inputClassName:i}))))},e.RegionSelect=function(e){var o=e.containerClassName,i=e.inputClassName,c=e.onTextChange,s=e.defaultValue,u=e.onChange,l=e.placeHolder,f=e.src,d=a(e,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","src"]),h=n.useState([]),p=h[0],v=h[1];return n.useEffect((function(){r(f).then((function(e){v(e)}))}),[f]),n.createElement(n.Fragment,null,n.createElement("div",{className:o,style:{position:"relative"}},n.createElement(m,t({},d,{placeHolder:l,options:p,onChange:function(e){u&&u(e)},onTextChange:c,defaultValue:s,inputClassName:i}))))},e.StateSelect=function(e){var o=e.containerClassName,i=e.inputClassName,r=e.onTextChange,c=e.defaultValue,s=e.onChange,u=e.countryid,f=e.placeHolder,d=e.src,h=a(e,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","countryid","placeHolder","src"]),p=n.useState([]),v=p[0],g=p[1];return n.useEffect((function(){u&&l(u,d).then((function(e){g(e)}))}),[u,d]),n.createElement(n.Fragment,null,n.createElement("div",{className:o,style:{position:"relative"}},n.createElement(m,t({},h,{placeHolder:f,options:v,onChange:function(e){s&&s(e)},onTextChange:r,defaultValue:c,inputClassName:i}))))}})); //# sourceMappingURL=index.js.map