react-styled-radio - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

dist/index.es.js

@@ -5,3 +5,3 @@ import React, { Component } from 'react';
 var styles = function styles(props) {
-  return '\n  button {\n    padding: ' + (props.small ? '2px' : props.large ? '6px' : '4px') + ';\n    width: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    height: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    border-radius: 50%;\n    border-style: solid;\n    border-width: ' + (props.small ? '1px' : props.large ? '3px' : '2px') + ';\n    border-color: ' + (props.theme.inputBorder ? props.theme.inputBorder : '#CCCCCC') + '\n    transition: all .25s ease-in-out;\n  }\n  button:hover {\n    cursor: pointer;\n    opacity: .85;\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#0069D9') + ';\n  }\n  button:focus {\n    outline: none;\n  }\n  button span {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: white;\n    border-radius: 50%;\n  }\n  &.active button {\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#0069D9') + '\n    background-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#0069D9') + '\n  }\n  .radio__text {\n    margin-left: 10px;\n    text-transform: capitalize;\n    color: ' + (props.theme.inputLabel ? props.theme.inputLabel : '#212529') + ';\n  }\n  input {\n    display: none;\n  }\n';
+  return '\n  display: flex;\n  button {\n    padding: 0;\n    width: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    height: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    background-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n    border-radius: 50%;\n    border-style: solid;\n    border-width: ' + (props.large ? '2px' : '1px') + ';\n    border-color: ' + (props.theme.inputBorder ? props.theme.inputBorder : '#CCCCCC') + '\n    transition: opacity .25s ease-in-out;\n  }\n  button:hover {\n    padding: 1px;\n    cursor: pointer;\n    opacity: .85;\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n  }\n  button:focus {\n    outline: none;\n  }\n  button span {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: white;\n    border-radius: 50%;\n  }\n  &.active button {\n    padding: ' + (props.small ? '4px' : props.large ? '6px' : '5px') + ';\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n    background-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n  }\n  .radio__text {\n    margin-left: 10px;\n    text-transform: capitalize;\n    color: ' + (props.theme.inputLabel ? props.theme.inputLabel : '#212529') + ';\n  }\n  input {\n    display: none;\n  }\n';
 };
@@ -234,3 +234,3 @@
 }, function (props) {
-  return props.vertical ? '0 0 1.5em 0' : '0 1.5em 0 0';
+  return props.vertical ? '0 0 .75em 0' : '0 1.5em 0 0';
 });
@@ -258,4 +258,3 @@
           name: _this.props.name,
-          handleChange: _this.handleChange,
-          theme: _this.props.theme
+          handleChange: _this.handleChange
         });
@@ -262,0 +261,0 @@ });

dist/index.js

@@ -12,3 +12,3 @@ 'use strict';
 var styles = function styles(props) {
-  return '\n  button {\n    padding: ' + (props.small ? '2px' : props.large ? '6px' : '4px') + ';\n    width: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    height: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    border-radius: 50%;\n    border-style: solid;\n    border-width: ' + (props.small ? '1px' : props.large ? '3px' : '2px') + ';\n    border-color: ' + (props.theme.inputBorder ? props.theme.inputBorder : '#CCCCCC') + '\n    transition: all .25s ease-in-out;\n  }\n  button:hover {\n    cursor: pointer;\n    opacity: .85;\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#0069D9') + ';\n  }\n  button:focus {\n    outline: none;\n  }\n  button span {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: white;\n    border-radius: 50%;\n  }\n  &.active button {\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#0069D9') + '\n    background-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#0069D9') + '\n  }\n  .radio__text {\n    margin-left: 10px;\n    text-transform: capitalize;\n    color: ' + (props.theme.inputLabel ? props.theme.inputLabel : '#212529') + ';\n  }\n  input {\n    display: none;\n  }\n';
+  return '\n  display: flex;\n  button {\n    padding: 0;\n    width: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    height: ' + (props.small ? '16px' : props.large ? '24px' : '20px') + ';\n    background-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n    border-radius: 50%;\n    border-style: solid;\n    border-width: ' + (props.large ? '2px' : '1px') + ';\n    border-color: ' + (props.theme.inputBorder ? props.theme.inputBorder : '#CCCCCC') + '\n    transition: opacity .25s ease-in-out;\n  }\n  button:hover {\n    padding: 1px;\n    cursor: pointer;\n    opacity: .85;\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n  }\n  button:focus {\n    outline: none;\n  }\n  button span {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: white;\n    border-radius: 50%;\n  }\n  &.active button {\n    padding: ' + (props.small ? '4px' : props.large ? '6px' : '5px') + ';\n    border-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n    background-color: ' + (props.theme.inputOutline ? props.theme.inputOutline : '#3B99FC') + ';\n  }\n  .radio__text {\n    margin-left: 10px;\n    text-transform: capitalize;\n    color: ' + (props.theme.inputLabel ? props.theme.inputLabel : '#212529') + ';\n  }\n  input {\n    display: none;\n  }\n';
 };
@@ -241,3 +241,3 @@
 }, function (props) {
-  return props.vertical ? '0 0 1.5em 0' : '0 1.5em 0 0';
+  return props.vertical ? '0 0 .75em 0' : '0 1.5em 0 0';
 });
@@ -265,4 +265,3 @@
           name: _this.props.name,
-          handleChange: _this.handleChange,
-          theme: _this.props.theme
+          handleChange: _this.handleChange
         });
@@ -269,0 +268,0 @@ });

package.json

 {
   "name": "react-styled-radio",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Radio button component for React built with styled-components < 💅>",
@@ -5,0 +5,0 @@ "author": "alexcasche",

README.md

@@ -69,5 +69,5 @@ react-styled-radio
 | `large`           |  _boolean_  |  `false`         | Button size              |
-| `onChange`        | _function_  |  `null`          | Function to run when value changes |
+| `handleChange`    | _function_  |  `null`          | Function to run when value changes |
 
-_The onChange prop is automatically passed the event object. See below example._
+_The handleChange prop is automatically passed the event object. See below example._
 
@@ -102,3 +102,3 @@ ```jsx
 |-------------------|-------------|------------------|
-| `inputBG`         |  _string_   |  `#20232A`       |
+| `inputBg`         |  _string_   |  `#20232A`       |
 | `inputBorder`     |  _string_   |  `#292C34`       |
@@ -119,3 +119,3 @@ | `inputColor`      |  _string_   |  `#212529`       |
   <ThemeProvider theme={theme}>
-    <RadioGroup horizontal name="gender" onChange={this.onChange}>
+    <RadioGroup horizontal name="gender" handleChange={this.handleChange}>
       <Radio small value="male" label="male"/>
@@ -134,3 +134,3 @@ <Radio small value="female" label="female"/>
 return (
-  <RadioGroup horizontal name="gender" onChange={this.onChange}>
+  <RadioGroup horizontal name="gender" handleChange={this.handleChange}>
     <Radio theme={theme} small value="male" label="male"/>
@@ -137,0 +137,0 @@ <Radio theme={theme} small value="female" label="female"/>

No alert changes

Improved metrics

Total package byte prevSize

24589

0.9%

No dependency changes