├── .gitattributes ├── .npmignore ├── .bithoundrc ├── docs ├── .DS_Store ├── demo.gif ├── css │ ├── main.css │ └── bootstrap.min.css ├── index.js └── example.js ├── src ├── index.js ├── portal.js ├── getAbsoluteBoundingRect.js ├── hint.js └── styles.js ├── .gitignore ├── .travis.yml ├── __tests__ └── boilerplate_test.js ├── .editorconfig ├── lib └── post_install.js ├── .eslintrc.js ├── README.md ├── .babelrc ├── LICENSE ├── DEVELOPMENT.md ├── package.json └── webpack.config.babel.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | bin/* eol=lf -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo/ 2 | dist/ 3 | tests/ 4 | src/ 5 | .* 6 | 7 | -------------------------------------------------------------------------------- /.bithoundrc: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "dist/*.js" 4 | ] 5 | } -------------------------------------------------------------------------------- /docs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asadm/react-hints/HEAD/docs/.DS_Store -------------------------------------------------------------------------------- /docs/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asadm/react-hints/HEAD/docs/demo.gif -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // this should be the entry point to your library 2 | module.exports = require('./hint').default; 3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | gh-pages/ 3 | dist/ 4 | dist-es6/ 5 | dist-modules/ 6 | node_modules/ 7 | coverage/ 8 | npm-debug.log 9 | .eslintcache 10 | .DS_Store 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | - "5" 5 | - "6" 6 | script: 7 | - npm run test:lint 8 | - npm run test:coverage 9 | after_success: 10 | - bash <(curl -s https://codecov.io/bash) 11 | -------------------------------------------------------------------------------- /docs/css/main.css: -------------------------------------------------------------------------------- 1 | .ex1{ 2 | width: 300px; 3 | height: 300px; 4 | padding: 50px; 5 | border: 1px solid #333; 6 | border-radius: 3px; 7 | text-align: center; 8 | font-size: 16px; 9 | margin: 0 auto; 10 | padding-top: 130px; 11 | } 12 | 13 | .table-props tr td:nth-child(2) { 14 | max-width: 200px; 15 | word-wrap: break-word; 16 | } -------------------------------------------------------------------------------- /__tests__/boilerplate_test.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import { 3 | // renderIntoDocument, 4 | // findRenderedDOMComponentWithClass, 5 | // findRenderedDOMComponentWithTag, 6 | // Simulate 7 | // } from 'react-addons-test-utils'; 8 | import { expect } from 'chai'; 9 | 10 | describe('Boilerplate', function () { 11 | it('should do boilerplate things', function () { 12 | // TODO: test something now 13 | expect(true).to.equal(true); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /lib/post_install.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // adapted based on rackt/history (MIT) 3 | // Node 0.10+ 4 | var execSync = require('child_process').execSync; 5 | var stat = require('fs').stat; 6 | 7 | // Node 0.10 check 8 | if (!execSync) { 9 | execSync = require('sync-exec'); 10 | } 11 | 12 | function exec(command) { 13 | execSync(command, { 14 | stdio: [0, 1, 2] 15 | }); 16 | } 17 | 18 | stat('dist-modules', function(error, stat) { 19 | // Skip building on Travis 20 | if (process.env.TRAVIS) { 21 | return; 22 | } 23 | 24 | if (error || !stat.isDirectory()) { 25 | exec('npm i babel-cli babel-preset-es2015 babel-preset-react'); 26 | exec('npm run dist:modules'); 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /docs/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable global-require, import/no-unresolved, react/no-multi-comp */ 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import GithubCorner from 'react-github-corner'; 5 | 6 | import './css/bootstrap.min.css'; 7 | import './css/main.css'; 8 | 9 | import Example from './example'; 10 | 11 | // Add your documentation imports here. These are available to 12 | // React specimen. Do NOT pass React here as Catalog does that. 13 | // const documentationImports = {}; 14 | // const title = `${NAME} v${VERSION}`; // eslint-disable-line no-undef 15 | const project = `${USER}/${NAME}`; // eslint-disable-line no-undef 16 | 17 | ReactDOM.render( 18 |
{' '} and a hint message.npm install react-hints --saveCode:
74 |Code:
98 || Name | 109 |Type | 110 |Default | 111 |Description | 112 |
|---|---|---|---|
| message | 117 |string or node (required) | 118 |- | 119 |The message to display in the popover when hint is clicked.
120 | Can be string, any React element, etc. |
121 |
| id | 124 |string (required) | 125 |- | 126 |In order for the hint to appear only once, id is used
127 | to remember if user had already dismissed this hint before. 128 | 129 | The state is stored is localStorage so user does not see the hint
130 | even after page refresh. |
131 |
| position | 134 |string One of: {'\'topright\''},
135 | {'\'top\''},
136 | {'\'topleft\''},
137 | {'\'left\''},
138 | {'\'bottomleft\''},
139 | {'\'bottom\''},
140 | {'\'bottomright\''},
141 | {'\'right\''}
142 | |
143 | {'\'topright\''} |
144 | Which side of the element should the hint be on. | 145 |
| popupDirection | 148 |string One of: {'\'topright\''},
149 | {'\'top\''},
150 | {'\'topleft\''},
151 | {'\'left\''},
152 | {'\'bottomleft\''},
153 | {'\'bottom\''},
154 | {'\'bottomright\''},
155 | {'\'right\''}
156 | |
157 | {'\'right\''} |
158 | Which side of the hint should the popup appear on,
159 | when hint is clicked. |
160 |
| onClose | 163 |func | 164 |- | 165 |Optional callback can be provided to be called
166 | when hint is dismissed by user. |
167 |
| closeText | 170 |string | 171 |{'\'Got it!\''} |
172 | Text for the close/dismiss button. | 173 |
| isHidden | 176 |bool | 177 |false |
178 | Forcefully hide the hint. | 179 |