How to use the preact.render function in preact

To help you get started, we’ve selected a few preact examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github preactjs / preact / demo / index.js View on Github external
}
}

function EmptyFragment() {
	return ;
}

// document.body.innerHTML = renderToString();
// document.body.firstChild.setAttribute('is-ssr', 'true');

installLogger(
	String(localStorage.LOG) === 'true' || location.href.match(/logger/),
	String(localStorage.CONSOLE) === 'true' || location.href.match(/console/)
);

render(, document.body);
github iranopendata / iranopendata.github.io / app / assets / scripts / main.js View on Github external
const language = matched[1];
      const dataset = matched[2];

      // We are rendering a single dataset
      page_content.innerHTML = '<section><div id="dynamic-single-dataset" class="wrapper wrapper-content-sm wrapper-content-dataset"></div></section>';

      // Modify the nav
      const navLinkEnglish = document.getElementById('nav-link-english');
      const navLinkFarsi = document.getElementById('nav-link-farsi');
      const path = location.pathname.slice(3);

      navLinkEnglish['href'] = `/en${path}`;
      navLinkFarsi['href'] = `/fa${path}`;

      // Render the dataset
      render(h(Dataset, {lang: language, id: dataset}), document.getElementById('dynamic-single-dataset'));
    }

    else {
      var errorText = "<p style="text-align: center; margin-bottom: 20em; font-size: 1em;">Sorry, we can't seem to find the page you're looking for. Try going to the <a href="/&quot;+PAGE_LANG+&quot;">homepage</a> or checkout some of our <a href="/&quot;+PAGE_LANG+&quot;/datasets">datasets"
      page_content.innerHTML = '</a></p><h2 style="text-align: center; margin-top: 5em; margin-bottom: .4em;"><a href="/&quot;+PAGE_LANG+&quot;/datasets">404 - Page Not Found</a></h2><a href="/&quot;+PAGE_LANG+&quot;/datasets">' + errorText;
    }

  });
</a>
github daybrush / moveable / release / latest / dist / moveable.cjs.js View on Github external
__proto.destroy = function () {
    preact.render("", this.tempElement);
    this.off();
    this.tempElement = null;
    this.innerMoveable = null;
  };
github ipatate / gdpr-cookies / src / index.js View on Github external
const main = locale =&gt; {
  if (target) {
    const store = initStore(options, locale, messages);
    render(
      
        
      ,
      target,
    );
    createMask(store);
  }
};
github zouhir / preact-habitat / dist / preact-habitat.es.js View on Github external
hostElements.forEach(function (elm) {
    var hostNode = elm;
    if (hostNode._habitat) {
      return; 
    }
    hostNode._habitat = true;
    var props = collectPropsFromElement(elm, defaultProps) || defaultProps;
    if(cleanRoot) {
      hostNode.innerHTML = "";
    }
    return render(h(widget, props), hostNode, root);
  });
};
github Tencent / omi / packages / preact-css / examples / simple / src / index.js View on Github external
<div>Hello Preact CSS</div>
    
  )
}

Comp.css = `
h1{
  color: red;
}
`

Preact.render(, document.querySelector('#root'))


//Test Multiple rendering only append style once
Preact.render(, document.querySelector('#root2'))


class CompB extends Preact.Component {
  static css = `
  h1{
    color: green;
  }
  `

  render() {
    return &lt;&gt;
      <h1>
        I'm green
      </h1>
      <div>
        I'm black</div>
github mikesteele / dual-captions / my / my3 / index.js View on Github external
import { render } from "preact";
import App from './components/App';

if (typeof window !== "undefined") {
  render(, document.body);
}
github i18next / react-i18next / example / v9.x.x / preact / src / index.js View on Github external
import { h, render } from 'preact';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import './i18n';

render(, document.getElementById('root'));
registerServiceWorker();
github pastelsky / bundlephobia / src / index.js View on Github external
function init () {
  let App = require('./components/app').default
  root = render(, document.body, root)
}
github the-fast-track / book-5.0-4 / spa / src / app.js View on Github external
{conference.city} {conference.year}
                        
                    ))}
                
            

            
                
                
            
        
    )
}

render(, document.getElementById('app'));