0.9.13 • Published 5 years ago

@easyguide/select v0.9.13

Weekly downloads
13
License
MIT
Repository
github
Last release
5 years ago

@easyguide/select

Camponents select ui

NPM JavaScript Style Guide

Install

npm install --save @easyguide/select

Usage simple select

import React, {Fragment} from 'react'
import Select from '@easyguide/select'

class Example extends Component {
  render() {
    const data = [{key: 1, value: 'Option 1'}, {key: 2, value: 'Option 2'}]

    return (
      <Fragment>
        <Select
          data={data}
          onChange={item => console.log(`value:${item.value}`)}
          render={item => (
            <div>
              <span>
                <img
                  style={{
                    marginRight: 10,
                    verticalAlign: 'bottom',
                  }}
                  width="20"
                  height="20"
                  src="https://cdn4.iconfinder.com/data/icons/48-bubbles/48/04.Bank-512.png"
                />
                <span>{item.value}</span>
              </span>
            </div>
          )}
          renderListItem={item => `${item.key} - ${item.value}`}
        />
      </Fragment>
    )
  }
}

Usage select with live search

import React, {Fragment} from 'react'
import Select from '@easyguide/select'

class Example extends Component {
  render() {
    const data = [{key: 1, value: 'Option 1'}, {key: 2, value: 'Option 2'}]

    return (
      <Fragment>
        <Select
          liveSearch
          data={data}
          placeholder="Digite uma opção"
          onChange={item => console.log(`value:${item.value}`)}
          renderListItem={item => `${item.key} - ${item.value}`}
          render={item => (
            <div>
              <span>
                <img
                  style={{
                    marginRight: 10,
                    verticalAlign: 'bottom',
                  }}
                  width="20"
                  height="20"
                  src="https://cdn4.iconfinder.com/data/icons/48-bubbles/48/04.Bank-512.png"
                />
                <span>{item.value}</span>
              </span>
            </div>
          )}
        />
      </Fragment>
    )
  }
}

License

MIT © iamtchelo

0.9.13

5 years ago

0.9.10

5 years ago

0.9.9

5 years ago

0.9.8

5 years ago

0.9.2

5 years ago

0.9.1

5 years ago

0.8.0

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago

0.5.0

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago