├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── HISTORY.md ├── LICENSE ├── README.md ├── lib └── AltText.js └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | root = true 4 | 5 | [*] 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = false 9 | insert_final_newline = true 10 | indent_style = tab 11 | 12 | [*.json] 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.yml] 17 | indent_style = space 18 | indent_size = 2 19 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | example/dist/* 3 | node_modules/* 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "keystone" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Coverage tools 11 | lib-cov 12 | coverage 13 | 14 | # Dependency directory 15 | node_modules 16 | 17 | # Publish directory 18 | .publish 19 | 20 | # Other 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .editorconfig 2 | bower.json 3 | examples/dist 4 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | # React-Alt-Text 2 | 3 | ## v2.0.0 / 2015-05-15 4 | 5 | * Updated to React ^0.14.0 || ^15.0.0 6 | 7 | ## v1.1.0 / 2015-05-15 8 | 9 | * Improved; props are now passed through to the component, except specific exclusions: `component`, `modifier`, `normal`, `modified` 10 | 11 | ## v1.0.0 / 2015-05-13 12 | 13 | * Initial Release 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Jed Watson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Alt-Text 2 | 3 | React.js Component for displaying alternate text when the [alt] key is pressed. 4 | 5 | ## Install 6 | 7 | ``` 8 | npm install --save react-alt-text 9 | ``` 10 | 11 | ## Usage 12 | 13 | ``` 14 | import AltText from 'react-alt-text'; 15 | 16 | 17 | ``` 18 | 19 | ## License 20 | 21 | The MIT License (MIT) 22 | 23 | Copyright (c) 2016 Jed Watson 24 | -------------------------------------------------------------------------------- /lib/AltText.js: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const blacklist = require('blacklist'); 3 | const vkey = require('vkey'); 4 | 5 | const AltText = React.createClass({ 6 | displayName: 'AltText', 7 | getDefaultProps: function () { 8 | return { 9 | component: 'span', 10 | modifier: '', 11 | normal: '', 12 | modified: '', 13 | }; 14 | }, 15 | getInitialState: function () { 16 | return { 17 | modified: false, 18 | }; 19 | }, 20 | componentDidMount: function () { 21 | document.body.addEventListener('keydown', this.handleKeyDown, false); 22 | document.body.addEventListener('keyup', this.handleKeyUp, false); 23 | }, 24 | componentWillUnmount: function () { 25 | document.body.removeEventListener('keydown', this.handleKeyDown); 26 | document.body.removeEventListener('keyup', this.handleKeyUp); 27 | }, 28 | handleKeyDown: function (e) { 29 | if (vkey[e.keyCode] !== this.props.modifier) return; 30 | this.setState({ 31 | modified: true, 32 | }); 33 | }, 34 | handleKeyUp: function (e) { 35 | if (vkey[e.keyCode] !== this.props.modifier) return; 36 | this.setState({ 37 | modified: false, 38 | }); 39 | }, 40 | render: function () { 41 | var props = blacklist(this.props, 'component', 'modifier', 'normal', 'modified'); 42 | return React.createElement(this.props.component, props, this.state.modified ? this.props.modified : this.props.normal); 43 | }, 44 | }); 45 | 46 | module.exports = AltText; 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-alt-text", 3 | "version": "2.0.0", 4 | "description": "React.js Component for displaying alternate text when the [alt] key is pressed", 5 | "main": "lib/AltText.js", 6 | "author": "Jed Watson", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/JedWatson/react-alt-text.git" 11 | }, 12 | "dependencies": { 13 | "blacklist": "^1.1.2", 14 | "vkey": "^1.0.0" 15 | }, 16 | "devDependencies": { 17 | "eslint": "^2.7.0", 18 | "eslint-config-keystone": "^2.1.0", 19 | "eslint-plugin-react": "^4.3.0" 20 | }, 21 | "peerDependencies": { 22 | "react": "^0.14.0 || ^15.0.0" 23 | }, 24 | "scripts": { 25 | "test": "echo \"no tests yet\" && exit 0", 26 | "lint": "eslint ./; true" 27 | }, 28 | "keywords": [ 29 | "react", 30 | "react-component", 31 | "alt", 32 | "text", 33 | "keypress" 34 | ] 35 | } 36 | --------------------------------------------------------------------------------