Example project demonstrating the use of React Flag Icon Css with Css Modules or standard (global) Css, and custom country flags images.

[]()

Powered by webpack 4.

Previous versions:

• webpack 3
• webpack 2
• webpack 1

Installation

Clone the repository:

$ git clone https://github.com/matteocng/react-flag-icon-css-example-multi-example-multi.git
$ cd react-flag-icon-css-example-multi-example-multi

Install the required modules with Yarn:

$ yarn

or with npm:

$ npm install

Option A) Css Modules

Run the webpack development server and apply the configuration for Css Modules:

$ yarn start

or with npm:

$ npm run start

Open a browser and go here: http://localhost:8080.

Please note that this example uses React Css Modules which is a HOC (Higher Order Component) that automatically maps Css Modules to React components. The usage of React Css Modules is completely optional; if you don't use it, instead of writing styleName='some-css-module', write className={styles['some-css-module']}.

Option B) Standard, global Css

Run the webpack development server and apply the configuration for standard Css:

$ yarn start:classes

or with npm:

$ npm run start:classes

Open a browser and go here: http://localhost:8080.

Starting the server on another port

You can start the server on another port with this command:

$ PORT=5100 yarn start

or with npm:

$ PORT=6300 npm run start

Notes on webpack configuration

This example app uses the USE_CSS_MODULES environment variable (set by package.json scripts) to allow for an easy "switch" between a configuration with or without Css Modules (see: webpack.config.js). This results in more complex code than need be.

In a real project you would never use the USE_CSS_MODULES switch and getStylePropName, and instead of writing [options.stylePropName] in the React components, you would write className or a combination of className and styleName (if you used React Css Modules or Babel Plugin React Css Modules).

Actually, the recommended approach adopted in the upcoming version of create-react-app, is to configure webpack so that its loaders load files ending in .module.css as Css Modules, and files ending in .css as global Css. If you decide to go this way by using the upcoming version of create-react-app or with a custom app, it is easier to use React Flag Icon Css with useCssModules: false. Otherwise, you may try forcing any file that contains the pattern flag-icon-css and ends with .css to be loaded as Css Modules in your webpack configuration (to be tested!).

Styles

This example app uses sass (.scss) styles, but sass is not required to use react-flag-icon-css. Your app can use any CSS preprocessor (such as postcss) or no CSS preprocessor at all. For instance, to use postcss in your stylesheets:

• rename .scss files to .css.
• remove sass-loader from webpack.config.js.
• npm install or yarn add the PostCSS plugins that you need.
• import() them into webpack.config.js
• add them to the postcss-loader section after autoprefixer.

Contributing

Contributions are welcome. Please use a topic branch, follow the AngularJS commit style guidelines and check that yarn run pre-commit returns zero errors before opening a PR. Thanks!

License

This project is licensed under the terms of the MIT license.