npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rareas

v1.0.9

Published

area select input for mobile

Downloads

54

Readme

React实现的移动端区域选择工具。

安装

npm install rareas

使用

通过React组件的方式使用:

import React from 'react'
import {render} from 'react-dom'
import RAreas from 'RAreas' //引入RAreas组件 const RAreas = require('RAreas')
render(<RAreas onCancel={this.cancelHandle} onCommit={this.commitHandle}/>) //使用

组件默认提供中国的省市区选项。也可以自行传入区域定义的区域参数。

组件接口

接口 | 类型 | 说明 ----- | ---- | --- list | array | 区域定义列表。列表的结构为:[{name:'',id:'',child:[{id:'',name:'',child:[{id:'',name:''}]}]}]目前只支持三级结构。如果不指定的话默认会使用内置的中国省市区列表。 onCancel | function | 当取消按钮被点击时触发的回调。(event)=>{} onCommit | function | 当确定按钮被点击时触发的回调。(data,event)=>{}data参数表示当前所选的地域。其结构为:{province: {id: name:}city: {id: name:}area: {id: name:}}。对应传入的数据。

打包说明

组件使用es6和scss开发,所以需要引入babel和node-sass打包。相关包已经通过package.jsondependencies参数引入。只要对webpack进行以下配置即可。

module: {
        rules: [{
            test: /\.js(x)$/,
            use: [{
                loader: 'babel-loader',
                options: { presets: ['es2015', 'react'] } //处理es6和react
            }],
            exclude: /node_modules/
        }, {
            test: /\.scss$/, //处理scss或sass样式。
            use: [
                'style-loader',
                'css-loader',
                {//postcss用于为样式自动添加浏览器头(例如:-webkit),如无需要,可以移除
                    loader:'postcss-loader',
                    options: {
                        plugins: function() {
                            return [
                                require('autoprefixer')()
                            ];
                        }
                    }
                },
                'sass-loader' //sass加载器
            ]
        }
        //your rules
        ]
    }

如果nodejs的版本过低(7.2以下)安装最新的sass会报错,请单独使用cnpm安装node-sass:

$ npm rm node-sass
$ cnpm install node-sass

本项目的默认地域数据来自LArea开源项目:https://github.com/xfhxbb/LArea。感谢他们的辛勤工作。