React Vote Component

Developer
Travis Arnold
Size
5,465 Kb
Views
24,288
  1. React Vote Component Previews
  2. React Vote Component HTML Codes
  3. React Vote Component CSS Codes
  4. React Vote Component JS Codes

How do I make an react vote component?

What is a react vote component? How do you make a react vote component? This script and codes were developed by Travis Arnold on 12 September 2022, Monday.

React Vote Component Previews
IQ Test

React Vote Component - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Vote Component</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Arimo'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .vote { font-family: 'Arimo', sans-serif; text-align: center; color: #525558; user-select: none; cursor: default; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.vote__arrow { width: 32px; margin: 8px 0; fill: none; stroke-width: 2; stroke: #abaeb1; cursor: pointer; transition: transform 150ms ease-in-out;
}
.vote__arrow:active { transform: scale(1.15);
}
.vote__arrow--up:active { stroke: #b4da55;
}
.vote__arrow--down:active { stroke: #F33119;
}
.vote__columns { display: flex; align-items: center; justify-content: center;
}
.vote__column { height: 48px; font-size: 42px; overflow: hidden;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-0.14.1.js'></script>
<script src='https://fb.me/react-dom-0.14.1.js'></script>
<script src='https://cdn.rawgit.com/chenglou/react-motion/cc852fe787bb15a8b4a9e51538e03c57d5543d2e/build/react-motion.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Vote Component - Script Codes CSS Codes

.vote { font-family: 'Arimo', sans-serif; text-align: center; color: #525558; user-select: none; cursor: default; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.vote__arrow { width: 32px; margin: 8px 0; fill: none; stroke-width: 2; stroke: #abaeb1; cursor: pointer; transition: transform 150ms ease-in-out;
}
.vote__arrow:active { transform: scale(1.15);
}
.vote__arrow--up:active { stroke: #b4da55;
}
.vote__arrow--down:active { stroke: #F33119;
}
.vote__columns { display: flex; align-items: center; justify-content: center;
}
.vote__column { height: 48px; font-size: 42px; overflow: hidden;
}

React Vote Component - Script Codes JS Codes

"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var _React = React;
var Component = _React.Component;
var Children = _React.Children;
var PropTypes = _React.PropTypes;
var _ReactMotion = ReactMotion;
var Motion = _ReactMotion.Motion;
var spring = _ReactMotion.spring;
var Arrow = function Arrow(_ref) { var direction = _ref.direction; var props = _objectWithoutProperties(_ref, ["direction"]); return React.createElement( "svg", _extends({ viewBox: "0 0 28 12" }, props), React.createElement("polyline", { points: direction === 'up' ? "0.595,11.211 14.04,1.245 27.485,11.211" : "27.485,0.803 14.04,10.769 0.595,0.803" }) );
};
Arrow.defaultProps = { direction: 'up'
};
var NumberColumn = function (_Component) { _inherits(NumberColumn, _Component); function NumberColumn() { _classCallCheck(this, NumberColumn); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } NumberColumn.prototype._getNumbers = function _getNumbers() { var numbers = []; var i = 0; while (i < 10) { numbers.push(React.createElement( "div", null, i )); i++; } return numbers; }; NumberColumn.prototype.render = function render() { var _this2 = this; var current = this.props.current; return React.createElement( "div", { className: "vote__column" }, React.createElement( Motion, { style: { y: spring(current * 10) } }, function (_ref2) { var y = _ref2.y; return React.createElement( "div", { style: { transform: "translateY(" + -y + "%)" } }, _this2._getNumbers() ); } ) ); }; return NumberColumn;
}(Component);
var Vote = function (_Component2) { _inherits(Vote, _Component2); function Vote(props) { _classCallCheck(this, Vote); var _this3 = _possibleConstructorReturn(this, _Component2.call(this, props)); _this3.state = { count: 43 }; return _this3; } Vote.prototype.componentDidMount = function componentDidMount() { // for demonstration purposes this.setState({ count: 22 }); }; Vote.prototype._getCount = function _getCount() { var counts = this.state.count.toString().split(''); return counts.map(function (_count) { if (_count === '-') { return React.createElement( "span", { className: "vote__column" }, "-" ); } else { return React.createElement(NumberColumn, { current: parseFloat(_count) }); } }); }; Vote.prototype.render = function render() { var _this4 = this; var count = this.state.count; return React.createElement( "div", { className: "vote" }, React.createElement(Arrow, { direction: "up", className: "vote__arrow vote__arrow--up", onClick: function onClick() { return _this4.setState({ count: count + 1 }); } }), React.createElement( "div", { className: "vote__columns" }, this._getCount() ), React.createElement(Arrow, { direction: "down", className: "vote__arrow vote__arrow--down", onClick: function onClick() { return _this4.setState({ count: count - 1 }); } }) ); }; return Vote;
}(Component);
ReactDOM.render(React.createElement(Vote, null), document.getElementById('app'));
React Vote Component - Script Codes
React Vote Component - Script Codes
Home Page Home
Developer Travis Arnold
Username souporserious
Uploaded September 12, 2022
Rating 4.5
Size 5,465 Kb
Views 24,288
Do you need developer help for React Vote Component?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Travis Arnold (souporserious) Script Codes
Name
Parallax Mouse Move
Segmented Control
Offset Animation Mixin
Credit Card CSS3 Animation
React Checkbox MultiSelect
Wipe Hover Effect
Simplistic WYSIWYG Editor
Playing with CSS folding
React Paper Ripple
Slide to Unlock
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!