Update: Created a compiled version, props are now passed, and the com…

…ponent is now claimable.

.gitignore

@@ -1,2 +1,3 @@
 **/node_modules
-*.log
+*.log
+dist

README.md

@@ -25,3 +25,13 @@ Simple component to put an invisible `Select` dropdown over a text.
 Dont forget to add styles.
 
     <link rel="stylesheet" href="/node_modules/react-textselect/textselect.css">
+
+# Build
+
+If you want to build this from source, you will need babel and less.
+
+	npm install -g babel less
+
+And run the pre publish script
+
+	npm run prepublish

package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-textselect",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "Select dropdown over text in React.",
-  "main": "textselect.jsx",
+  "main": "dist/textselect.js",
   "scripts": {
+    "prepublish": "mkdir -p dist && babel src/textselect.jsx -u -o dist/textselect.js --stage 1 && lessc src/textselect.less dist/textselect.css",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -13,19 +14,6 @@
     "text",
     "select"
   ],
-  "peerDependencies": {
-    "react": "^0.12.x"
-  },
   "author": "javierbyte",
-  "license": "ISC",
-  "browserify": {
-    "transform": [
-      [
-        "reactify",
-        {
-          "es6": true
-        }
-      ]
-    ]
-  }
+  "license": "ISC"
 }

textselect.jsx → src/textselect.jsx

@@ -13,12 +13,18 @@ var TextSelect = React.createClass({
     },
 
     render() {
+        var {options, active, onChange, className, ...other} = this.props;
+
+        var classes = 'react-textselect';
+
+        if(className) classes += ' ' + className;
+
         return (
-            <span className='react-textselect'>
-                {this.props.options[this.props.active]}
+            <span className={classes}>
+                {options[active]}
 
                 <select className='react-textselect-input' onChange={this.handleChange}>
-                    {this.props.options.map(function(value, index) {
+                    {options.map(function(value, index) {
                         return (
                             <option key={index}>{value}</option>
                         )

src/textselect.less

@@ -0,0 +1,28 @@
+.react-textselect {
+    border-bottom: 1px solid rgba(0, 0, 0, .33);
+    overflow: hidden;
+    padding-right: 1em;
+    margin-right: .17em;
+    cursor: pointer;
+
+    &::after {
+        position: absolute;
+        top: .45em;
+        right: 0;
+        display: block;
+        content: '';
+        height: 0;
+        width: 0;
+        border: .33em solid transparent;
+        border-top: .33em solid rgba(0, 0, 0, .33);
+    }
+
+    &-input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        opacity: 0;
+    }
+}