❤
npm
Sign UpSign In

react-countries-input

0.0.2 • Public • Published

React Countries Input

A React Component for to select countries calling code with flag inspired on restcountries.eu api and emotion to style.

Getting Started

yarn add react-countries-input
or
npm install react-countries-input --save

Demo

Demo Demo2

How to use

Basic

import React from 'react'
import ReactDOM from 'react-dom'
import ReactCountriesInput from 'react-countries-input'
 
class MyComponent extends React.Component {
  onChange = value => {
    console.log(response)
  }
 
  render() {
    return <ReactCountriesInput onChange={this.onChange} />
  }
}
 
export default MyComponent

Parameters

params value default value
onChange function Required
containerStyle object none
flagStyle object none
selectWrapperStyle object none
inputStyle object none

Styling example

Since this package is using emotion you can style like you would with emotion

import React from 'react'
import ReactCountriesInput from 'react-countries-input'
 
class MyComponent extends React.Component {
  onChange = value => {
    console.log(response)
  }
 
  render() {
    return (
      <ReactCountriesInput
        onChange={this.onChange}
        containerStyle={{
          background: 'red'
        }}
        flagStyle={{
         '&img': {
           width: 30
           height: 15
         }
        }}
        .....
      />
    )
  }
}
 
 
export default MyComponent

Readme

Keywords

Package Sidebar

Install

npm i react-countries-input

Repository

github.com/JeffersonFilho/react-countries-input

Homepage

github.com/JeffersonFilho/react-countries-input#readme

Weekly Downloads

110

Version

0.0.2

License

MIT

Unpacked Size

45.8 kB

Total Files

4

Last publish

Collaborators

  • jeffersonfilho
Try on RunKit
Report malware