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) • 15.4 kB
JavaScript
import e,{useState as n,useRef as t,useEffect as a}from"react";var o=function(){return o=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},o.apply(this,arguments)};function i(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 r(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 c(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 s=function(e){return r(void 0,void 0,void 0,(function(){var n;return c(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()]}}))}))},u=function(e,n){return r(void 0,void 0,void 0,(function(){var t,a,o;return c(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}}))]}}))}))},l=function(e){return r(void 0,void 0,void 0,(function(){var n,t;return c(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}}))]}}))}))},d=function(e,n){return r(void 0,void 0,void 0,(function(){var t,a,o;return c(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]}}))}))},f=function(e){return r(void 0,void 0,void 0,(function(){var n;return c(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()]}}))}))},m=function(e){return r(void 0,void 0,void 0,(function(){var n;return c(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()]}}))}))},h=function(e,n){return r(void 0,void 0,void 0,(function(){var t,a,o;return c(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:[]]}}))}))},p=function(e,n,t){return r(void 0,void 0,void 0,(function(){var a,o,i,r,s;return c(this,(function(c){switch(c.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=c.sent(),(i=o.find((function(n){return n.id===e})))?(r=i&&i.states?i.states:[],[2,(s=r.find((function(e){return e.id===n})))&&s.cities?s.cities:[]]):[2,[]]}}))}))},v=function(e){return r(void 0,void 0,void 0,(function(){var n,t,a,o,i,r,s,u,l,d,f,m;return c(this,(function(c){switch(c.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=c.sent(),a=[],o=0,i=t;o<i.length;o++)for(r=i[o],s=0,u=r.states;s<u.length;s++)for(l=u[s],d=0,f=l.cities;d<f.length;d++)m=f[d],a.push(m);return[2,a]}}))}))},g=function(){return e.createElement("svg",{height:"20",width:"20",viewBox:"0 0 20 20"},e.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"}))},C=function(r){var c=r.placeHolder,s=r.options,u=r.onChange,l=r.inputClassName,d=r.onTextChange,f=r.defaultValue,m=r.showFlag,h=void 0===m||m,p=i(r,["placeHolder","options","onChange","inputClassName","onTextChange","defaultValue","showFlag"]),v=n(!1),C=v[0],w=v[1],N=n(),y=N[0],j=N[1],E=n(""),b=E[0],x=E[1],k=t(null),T=t(null);a((function(){f&&j(f)}),[f]),a((function(){x(""),C&&k.current&&k.current.focus()}),[C]),a((function(){var e=function(e){T.current&&!T.current.contains(e.target)&&w(!1)};return window.addEventListener("click",e),function(){window.removeEventListener("click",e)}}));var H=function(e){return!!y&&y.id===e.id};return e.createElement("div",{className:"stdropdown-container"},e.createElement("div",{ref:T,onClick:function(){w(!0)},className:"stdropdown-input stsearch-box"},e.createElement("input",o({},p,{className:l,onChange:function(e){x(e.target.value),j(void 0),d&&d(e)},value:y?"".concat(h&&"emoji"in y?y.emoji+" ":"").concat(y.name):b||"",placeholder:c,ref:k})),e.createElement("div",{className:"stdropdown-tools"},e.createElement("div",{className:"stdropdown-tool"},e.createElement(g,null)))),C&&e.createElement("div",{className:"stdropdown-menu"},(b?s.filter((function(e){return e.name.toLowerCase().indexOf(b.toLowerCase())>=0})):s).map((function(n){return e.createElement("div",{onClick:function(){return function(e){j(e),u(e)}(n)},key:n.id,className:"".concat("stdropdown-item"," ").concat(H(n)&&"selected")},h&&e.createElement("span",{className:"stdropdown-flag"},"emoji"in n?n.emoji:""," "),n.name)}))))},w=function(t){var r=t.containerClassName,c=t.inputClassName,s=t.onTextChange,u=t.defaultValue,l=t.onChange,m=t.placeHolder,h=t.showFlag,p=t.region,v=t.src,g=i(t,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","showFlag","region","src"]),w=n([]),N=w[0],y=w[1];return a((function(){p?d(p,v).then((function(e){y(e)})):f(v).then((function(e){y(e)}))}),[p,v]),e.createElement(e.Fragment,null,e.createElement("div",{className:r,style:{position:"relative"}},e.createElement(C,o({},g,{placeHolder:m,options:N,onChange:function(e){l&&l(e)},showFlag:h,onTextChange:s,defaultValue:u,inputClassName:c}))))},N=function(t){var r=t.containerClassName,c=t.inputClassName,s=t.onTextChange,u=t.defaultValue,l=t.onChange,d=t.countryid,f=t.placeHolder,m=t.src,p=i(t,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","countryid","placeHolder","src"]),v=n([]),g=v[0],w=v[1];return a((function(){d&&h(d,m).then((function(e){w(e)}))}),[d,m]),e.createElement(e.Fragment,null,e.createElement("div",{className:r,style:{position:"relative"}},e.createElement(C,o({},p,{placeHolder:f,options:g,onChange:function(e){l&&l(e)},onTextChange:s,defaultValue:u,inputClassName:c}))))},y=function(t){var r=t.containerClassName,c=t.inputClassName,s=t.onTextChange,u=t.defaultValue,l=t.onChange,d=t.countryid,f=t.stateid,m=t.placeHolder,h=t.src,v=i(t,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","countryid","stateid","placeHolder","src"]),g=n([]),w=g[0],N=g[1];return a((function(){d&&p(d,f,h).then((function(e){N(e)}))}),[d,f,h]),e.createElement(e.Fragment,null,e.createElement("div",{className:r,style:{position:"relative"}},e.createElement(C,o({},v,{placeHolder:m,options:w,onChange:function(e){l&&l(e)},onTextChange:s,defaultValue:u,inputClassName:c}))))},j=function(){return e.createElement("svg",{height:"20",width:"20",viewBox:"0 0 20 20"},e.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"}))},E=function(r){var c=r.placeHolder,s=r.options,u=r.onChange,l=r.inputClassName,d=r.onTextChange,f=r.defaultValue,m=r.displayNative,h=i(r,["placeHolder","options","onChange","inputClassName","onTextChange","defaultValue","displayNative"]),p=n(!1),v=p[0],g=p[1],C=n(),w=C[0],N=C[1],y=n(""),E=y[0],b=y[1],x=t(null),k=t(null);a((function(){f&&N(f)}),[f]),a((function(){b(""),v&&x.current&&x.current.focus()}),[v]),a((function(){var e=function(e){k.current&&!k.current.contains(e.target)&&g(!1)};return window.addEventListener("click",e),function(){window.removeEventListener("click",e)}}));var T=function(e){return!!w&&w.code===e.code};return e.createElement("div",{className:"stdropdown-container"},e.createElement("div",{ref:k,onClick:function(){g(!0)},className:"stdropdown-input stsearch-box"},e.createElement("input",o({},h,{className:l,onChange:function(e){b(e.target.value),N(void 0),d&&d(e)},value:w?"".concat(m?w.native:w.name):E||"",placeholder:c,ref:x})),e.createElement("div",{className:"stdropdown-tools"},e.createElement("div",{className:"stdropdown-tool"},e.createElement(j,null)))),v&&e.createElement("div",{className:"stdropdown-menu"},(E?s.filter((function(e){return e.name.toLowerCase().indexOf(E.toLowerCase())>=0||e.native.toLowerCase().indexOf(E.toLowerCase())>=0})):s).map((function(n){return e.createElement("div",{onClick:function(){return function(e){N(e),u(e)}(n)},key:n.code,className:"".concat("stdropdown-item"," ").concat(T(n)&&"selected")},m?n.native:n.name)}))))},b=function(t){var r=t.containerClassName,c=t.inputClassName,s=t.onTextChange,u=t.defaultValue,l=t.onChange,d=t.placeHolder,f=t.displayNative,h=t.src,p=i(t,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","displayNative","src"]),v=n([]),g=v[0],C=v[1];return a((function(){m(h).then((function(e){C(e)}))}),[h]),e.createElement(e.Fragment,null,e.createElement("div",{className:r,style:{position:"relative"}},e.createElement(E,o({},p,{placeHolder:d,options:g,onChange:function(e){l&&l(e)},displayNative:f,onTextChange:s,defaultValue:u,inputClassName:c}))))},x=function(t){var r=t.containerClassName,c=t.inputClassName,u=t.onTextChange,l=t.defaultValue,d=t.onChange,f=t.placeHolder,m=t.src,h=i(t,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","src"]),p=n([]),v=p[0],g=p[1];return a((function(){s(m).then((function(e){g(e)}))}),[m]),e.createElement(e.Fragment,null,e.createElement("div",{className:r,style:{position:"relative"}},e.createElement(C,o({},h,{placeHolder:f,options:v,onChange:function(e){d&&d(e)},onTextChange:u,defaultValue:l,inputClassName:c}))))},k=function(){return e.createElement("svg",{height:"20",width:"20",viewBox:"0 0 20 20"},e.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"}))},T=function(r){var c=r.placeHolder,s=r.options,u=r.onChange,l=r.inputClassName,d=r.onTextChange,f=r.defaultValue,m=r.showFlag,h=void 0===m||m,p=i(r,["placeHolder","options","onChange","inputClassName","onTextChange","defaultValue","showFlag"]),v=n(!1),g=v[0],C=v[1],w=n(),N=w[0],y=w[1],j=n(""),E=j[0],b=j[1],x=t(null),T=t(null);a((function(){f&&y(f)}),[f]),a((function(){b(""),g&&x.current&&x.current.focus()}),[g]),a((function(){var e=function(e){T.current&&!T.current.contains(e.target)&&C(!1)};return window.addEventListener("click",e),function(){window.removeEventListener("click",e)}}));var H=function(e){return!!N&&N.id===e.id};return e.createElement("div",{className:"stdropdown-container"},e.createElement("div",{ref:T,onClick:function(){C(!0)},className:"stdropdown-input stsearch-box"},e.createElement("input",o({},p,{className:l,onChange:function(e){b(e.target.value),y(void 0),d&&d(e)},value:N?"".concat(h&&"emoji"in N?N.emoji+" ":"","+").concat(N.phone_code):E||"",placeholder:c,ref:x})),e.createElement("div",{className:"stdropdown-tools"},e.createElement("div",{className:"stdropdown-tool"},e.createElement(k,null)))),g&&e.createElement("div",{className:"stdropdown-menu"},(E?s.filter((function(e){return e.name.toLowerCase().indexOf(E.toLowerCase())>=0||e.phone_code.indexOf(E)>=0||("+"+e.phone_code).indexOf(E)>=0})):s).map((function(n){return e.createElement("div",{onClick:function(){return function(e){y(e),u(e)}(n)},key:n.id,className:"".concat("stdropdown-item"," ").concat(H(n)&&"selected")},h&&e.createElement("span",{className:"stdropdown-flag"},"emoji"in n?n.emoji:""," "),"+",n.phone_code)}))))},H=function(t){var r=t.containerClassName,c=t.inputClassName,s=t.onTextChange,u=t.defaultValue,l=t.onChange,m=t.placeHolder,h=t.showFlag,p=t.region,v=t.src,g=i(t,["containerClassName","inputClassName","onTextChange","defaultValue","onChange","placeHolder","showFlag","region","src"]),C=n([]),w=C[0],N=C[1];return a((function(){p?d(p,v).then((function(e){N(e)})):f(v).then((function(e){N(e)}))}),[p,v]),e.createElement(e.Fragment,null,e.createElement("div",{className:r,style:{position:"relative"}},e.createElement(T,o({},g,{placeHolder:m,options:w,onChange:function(e){l&&l(e)},showFlag:h,onTextChange:s,defaultValue:u,inputClassName:c}))))};export{y as CitySelect,w as CountrySelect,v as GetAllCities,p as GetCity,f as GetCountries,d as GetCountriesByRegion,m as GetLanguages,l as GetPhonecodes,u as GetPhonecodesByRegion,s as GetRegions,h as GetState,b as LanguageSelect,H as PhonecodeSelect,x as RegionSelect,N as StateSelect};
//# sourceMappingURL=index.js.map