{"_id":"360-coachmark","_rev":"1-0a77a6e21d97513e79dc04445b69dbc7","name":"360-coachmark","dist-tags":{"latest":"1.2.0"},"versions":{"1.1.0":{"name":"360-coachmark","version":"1.1.0","keywords":[],"author":"","license":"ISC","_id":"360-coachmark@1.1.0","maintainers":[{"name":"renanbrando360","email":"renan@360suites.com.br"}],"homepage":"https://github.com/360suites-engineering/coachmarkJS#readme","bugs":{"url":"https://github.com/360suites-engineering/coachmarkJS/issues"},"np":{"contents":"dist"},"dist":{"shasum":"b2af7a26e730b7a4f2023252dcca0b51f5e4e4e1","tarball":"https://registry.npmjs.org/360-coachmark/-/360-coachmark-1.1.0.tgz","fileCount":8,"integrity":"sha512-u1Pnhk01GEsJ7OBAsF3rUx2CIVN6OvOaWll7iQ59rJHDzGQ0K/cmHTRbAmd2JXm+NBtrJrh0WQcf4IjhxE4jpA==","signatures":[{"sig":"MEUCIFFjIzOYV747K2SLmCVc7tGXEdVyeoLm6RtHz5RkldY6AiEAneOJW5JzWPqqQUmDTZQtBWf9LIAJyp8GlbIi66+5xlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23845},"main":"dist/bundle.cjs.js","module":"dist/bundle.esm.js","gitHead":"12694982516c920b5bb442d1aaa042ebcdd2d8fe","scripts":{"test":"echo \"Error: no test specified\" && exit 0","build":"rollup --config rollup.config.js && cp package.json dist/package.json","prepublishOnly":"yarn build"},"_npmUser":{"name":"renanbrando360","email":"renan@360suites.com.br"},"repository":{"url":"git+https://github.com/360suites-engineering/coachmarkJS.git","type":"git"},"_npmVersion":"10.5.2","description":"## Why ??","directories":{"example":"examples"},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"rollup":"^1.27.0","rollup-plugin-terser":"^5.1.2"},"_npmOperationalInternal":{"tmp":"tmp/360-coachmark_1.1.0_1731072262835_0.7413287913242619","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"360-coachmark","version":"1.2.0","description":"## Why ??","main":"dist/bundle.cjs.js","module":"dist/bundle.esm.js","directories":{"example":"examples"},"scripts":{"prepublishOnly":"yarn build","build":"rollup --config rollup.config.js && cp package.json dist/package.json","test":"echo \"Error: no test specified\" && exit 0"},"repository":{"type":"git","url":"git+https://github.com/360suites-engineering/coachmarkJS.git"},"keywords":[],"author":"","license":"ISC","bugs":{"url":"https://github.com/360suites-engineering/coachmarkJS/issues"},"homepage":"https://github.com/360suites-engineering/coachmarkJS#readme","devDependencies":{"rollup":"^1.27.0","rollup-plugin-terser":"^5.1.2"},"np":{"contents":"dist"},"_id":"360-coachmark@1.2.0","gitHead":"a278001947730812694d763cac70e1e68ceaa744","_nodeVersion":"20.13.1","_npmVersion":"10.5.2","dist":{"integrity":"sha512-kYVeIeSTVeVJUuPxOrFGJmoIauFdSjgd6fn7+z+Lixphyr+srWQXp8JWQYgCG0J35r4NMx/aWCK3u8p11oGg3w==","shasum":"0b45a31632f68ce522cc25718f0a687668df7744","tarball":"https://registry.npmjs.org/360-coachmark/-/360-coachmark-1.2.0.tgz","fileCount":8,"unpackedSize":23845,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvv3Zctco/VKfFMIzIkAUQXF314DTw6rDvQH++xGqr/QIhAPYoTCeFDNu6L4ruMWzLkcpTUZv2VPaC20EIZiGN3xPa"}]},"_npmUser":{"name":"renanbrando360","email":"renan@360suites.com.br"},"maintainers":[{"name":"renanbrando360","email":"renan@360suites.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/360-coachmark_1.2.0_1731072457816_0.2770063423179365"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-08T13:24:22.719Z","modified":"2024-11-08T13:27:38.169Z","1.1.0":"2024-11-08T13:24:23.159Z","1.2.0":"2024-11-08T13:27:37.996Z"},"bugs":{"url":"https://github.com/360suites-engineering/coachmarkJS/issues"},"license":"ISC","homepage":"https://github.com/360suites-engineering/coachmarkJS#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/360suites-engineering/coachmarkJS.git"},"description":"## Why ??","maintainers":[{"name":"renanbrando360","email":"renan@360suites.com.br"}],"readme":"# CoachmarkJS\n\n## Why ??\n\nOften while building amazing UIs, we forget to build an onboarding experience.  Without onboarding, user might not know how to best use it.  This package helps you to make a good onboaring experience, by making just a few changes in your document.\n\n## Installation\n\nTo install via npm run\n``` npm install coachmarkjs ```\n\nOr yarn\n``` yarn add coachmarkjs ```\n\n### Usage\n\nImport the package\n```js \n    import Coachmark from 'coachmarkjs'\n```\n\nAdd the data-attribute `data-coachmark` to your DOM element which you want to highlight.\nThis attribute takes a number which lets you specify the order in which the elements would be\nhighlighted. DOM Element with attribute `data-coachmark = 0` will be highlighted before element with attribute `data-coachmark = 1`\n\nSimilarly, add the data-attribute `data-coachmark-text` to DOM element for the tooltip text.\n\nAs shown below,\n\n```html\n    <article\n        class=\"column\"\n        data-coachmark=\"4\"\n        data-coachmark-text=\"The tooltip text\"\n    >\n        <div>\n            <img src=\"...\" alt=\"\" />\n        </div>\n        <p class=\"__text\">\n            This is a text element\n        </p>\n    </article>\n```\n\nTo initialize it\n\n```js\n    Coachmark.init()\n```\n\nFor React users,\n\n```js\n    // Onboarding Component\n    import Coachmark from 'coachmarkjs'\n    class Onboarding extends React.Component {\n\n        componentDidMount() {\n            Coachmark.init()\n        }\n\n        componentWillUnmount() {\n            Coachmark.destroy()\n        }\n\n        render() {\n            return (\n                <section data-coachmark=\"0\" data-coachmark-text=\"Tap here for next image\">\n                    //.....\n                </section>\n            )\n        }\n    }\n```\n\nIt uses dynamic style sheets which are created inly after `Coachmark.init()` is called and destroyed as soon as `Coachmark.destroy()` is called. This is a flexible approach, as it\nallows these styles to be overriden to suit the styling of the app.\n","readmeFilename":"README.md"}