Preact Habitat


Preact habitat is a 756Byte module that will help you ship your Preact components \ widget to any world wide DOM page in a very easy and neat way. ## Demos - *Simple Login* 🔑 [link](https://preact-habitat-inline.netlify.com/) - *Youtube Players* ▶️ [link](https://preact-habitat-youtube.netlify.com/) ## Use Case If you have built a [Preact](https://preactjs.com/) component (eg: Video, login, signup or booking components) and would like to bundle it and ship it to be loaded in multiple web applications, blogs without with mostly 0 or very minimal configuration from your package host, then preact-habitat is what you are after! ## Installation ```bash npm install --save preact-habitat ``` ## How to use ### Render your component using Habitat > ✨ NEW: Now habitat support multiple widget rendering✨ ```js import habitat from 'preact-habitat'; import WidgetAwesomeOne from './components/WidgetAwesome'; import WidgetAwesomeTwo from './components/WidgetAwesome'; import WidgetAwesomeThree from './components/WidgetAwesome'; let habitatOne = habitat(WidgetAwesomeOne); let habitatTwo = habitat(WidgetAwesomeTwo); let habitatThree = habitat(WidgetAwesomeTwo); habitatOne.render(); habitatTwo.render(); habitatThree.render({ name: 'data-mount-here', value: 'mount-number-three' }); ``` ### Set the build output library type to UMD usage example in Webpack: ```js output: { ... libraryTarget: 'umd' } ``` ### Inline Client Integration *Assuming your bundle available on: `https://cdn.awesome/widget.js`* ```html
``` > ✨ Pass props! ✨ ```html
``` ### Mount multiple widgets (not inline) > ✨ NEW: data-mount script attr ✨ ```html
... ... ... ... ... ``` ### Mount multiple widgets (developer specified divs) ```html
``` ```js import habitat from 'preact-habitat'; import WidgetAwesomeThree from './components/WidgetAwesome'; let habitatThree = habitat(WidgetAwesomeTwo); habitatThree.render({ name: 'data-widget-here-please', value: 'widget-number-three', inline: false }); ``` ### Render Method API Render method accepts an *Object* and supports 3 properties - name: HTML tag attribute name, Srting, default `data-mount`. - value: HTML tag attribute value, Strinf, default null. - inline: Enable \ Disable inline mounting for the widget, Boolean. ### Prop Names Rules Now habitat allow you to pass props from HTML to your preact components, here are the rules: - *starts with* `data-prop-` - *all lower case* `data-prop-videoid` === `this.prop.videoid` - *add dashes for camelCase* 🐫 `data-prop-video-id` === `this.prop.videoId` ## Thank You!, But.. 1. Please make sure your widget size is reasonable, bloated and big size bundles make puppies sick 🐶 😔 2. Feel free to fork, contribute or give it a 🌟. Open an issue or [chat with me](https://twitter.com/_zouhir) if you have any questions. ## License [MIT](LICENSE) - Copyright (c) [Zouhir Chahoud](http://zouhir.org)