React-select support?

[acchaulk]

I'm interested in using this library, but using react-select. Do you have any recommendations on how I could do so? I suppose it might be possible to be able to pass a custom Select component, but that would also mean changing some of the props and how options are generated/passed in. The other thought would be to expose some of the utility methods used in the library for filtering/generating a list of countries/regions. Any input/advice is welcome!

[benkeen]

Good question! I was just wondering the same for one of my own projects. :)

React-select is really pretty specific. It owns its own DOM and has its own structure of the code. So frankly I don't think this library is really that compatible. At the moment I'm thinking it may be better to just use the underlying https://github.com/country-regions/country-region-data library (which contains the raw country-region data) and have a grunt/build task to extract and format that data for use with react-select.

If I come up with something, I'll let you know.

[benkeen]

What I ended up doing is writing a convertor function to extract and separate the country & region data from the source repo, then have my app dynamically load the region data after the user selects a particular country. This keeps the file size as small as possible (just 4KB for the country data) which was a concern for me. The following code serializes the info into as small a format as possible, then I unserialize it and put it into a JS array of { value, label } structure for use by react-select.

Not sure if this helps, but this strikes me as the best approach.

const fs = require('fs');
const data = require('./node_modules/country-region-data/data.json');

const regionDataMap = {};
const countryPairs = [];

data.forEach(({ countryName, countryShortCode, regions }) => {
	const regionPairs = [];
	regions.map(({ name, shortCode }) => {
		regionPairs.push(`${shortCode}|${name}`);
	});
	regionDataMap[countryShortCode] = regionPairs.join('`');

	countryPairs.push(`${countryShortCode}|${countryName}`);
});

const countryJs = `export const countries = ${JSON.stringify(countryPairs.join('`'))};`;
const regionJs = `export const regionMap = ${JSON.stringify(regionDataMap)};`;

fs.writeFileSync('./country-data.js', countryJs);
fs.writeFileSync('./region-data.js', regionJs);