• Stars
    star
    356
  • Rank 119,434 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Wrap your component up as a custom element

preact-custom-element

Generate/register a custom element from a preact component. As of 3.0.0, this library implements the Custom Elements v1 spec. Previous versions (< 3.0.0) implemented the v0 proposal, which was only implemented in Chrome and is abandoned.

Usage

Import CustomElement and call with your component a tag name *, and a list of attribute names you want to observe:

import register from 'preact-custom-element';

const Greeting = ({ name = 'World' }) => (
  <p>Hello, {name}!</p>
);

register(Greeting, 'x-greeting', ['name']);

* Note: as per the Custom Elements specification, the tag name must contain a hyphen.

Use the new tag name in HTML, attribute keys and values will be passed in as props:

<x-greeting name="Billy Jo"></x-greeting>

Output:

<p>Hello, Billy Jo!</p>

Prop Names and Automatic Prop Names

The Custom Elements V1 specification requires explictly stating the names of any attributes you want to observe. From your Preact component perspective, props could be an object with any keys at runtime, so it's not always clear which props should be accepted as attributes.

If you omit the third parameter to register(), the list of attributes to observe can be specified using a static observedAttributes property on your Component. This also works for the Custom Element's name, which can be specified using a tagName static property:

import register from 'preact-custom-element';

// <x-greeting name="Bo"></x-greeting>
class Greeting extends Component {
  // Register as <x-greeting>:
  static tagName = 'x-greeting';

  // Track these attributes:
  static observedAttributes = ['name'];

  render({ name }) {
    return <p>Hello, {name}!</p>;
  }
}
register(Greeting);

If no observedAttributes are specified, they will be inferred from the keys of propTypes if present on the Component:

// Other option: use PropTypes:
function FullName(props) {
  return <span>{props.first} {props.last}</span>
}
FullName.propTypes = {
  first: Object,   // you can use PropTypes, or this
  last: Object     // trick to define untyped props.
};
register(FullName, 'full-name');

Related

preact-shadow-dom

More Repositories

1

preact

โš›๏ธ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
JavaScript
36,650
star
2

wmr

๐Ÿ‘ฉโ€๐Ÿš€ The tiny all-in-one development tool for modern web apps.
JavaScript
4,928
star
3

preact-cli

๐Ÿ˜บ Your next Preact PWA starts in 30 seconds.
JavaScript
4,685
star
4

signals

Manage state with style in every framework
TypeScript
2,105
star
5

preact-router

๐ŸŒŽ URL router for Preact.
JavaScript
972
star
6

preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
JavaScript
949
star
7

awesome-preact

A curated list of amazingly awesome things regarding Preact ecosystem ๐ŸŒŸ
885
star
8

preact-render-to-string

๐Ÿ“„ Universal rendering for Preact: render JSX and Preact components to HTML.
JavaScript
574
star
9

compressed-size-action

GitHub Action that adds compressed size changes to your PRs.
JavaScript
541
star
10

next-plugin-preact

Next.js plugin for preact X
JavaScript
391
star
11

preact-www

๐Ÿ“– Preact documentation website.
JavaScript
358
star
12

prefresh

Hot Module Reloading for Preact
JavaScript
351
star
13

preact-devtools

Browser extension for inspection Preact applications
TypeScript
295
star
14

preset-vite

Preset for using Preact with the vite bundler
TypeScript
256
star
15

eslint-config-preact

Unopinionated baseline ESLint config for Preact and Preact CLI codebases.
JavaScript
85
star
16

enzyme-adapter-preact-pure

Preact adapter for the Enzyme UI testing library
TypeScript
67
star
17

preact-iso

Isomorphic utilities for Preact
JavaScript
55
star
18

preact-ssr-prepass

Drop-in replacement for react-ssr-prepass
JavaScript
47
star
19

create-preact

Create a Vite-powered Preact app in seconds
JavaScript
35
star
20

preact-integrations

A collection of sample apps demonstrating Preact's compatibility with various 3rd party libraries
JavaScript
35
star
21

rfcs

RFCs for changes and ideas in relation to Preact
30
star
22

babel-plugin-transform-replace-expressions

A Babel plugin for replacing expressions with other expressions
JavaScript
23
star
23

jest-preset-preact

Jest preset for testing Preact apps
JavaScript
19
star
24

babel-plugin-transform-rename-properties

A Babel plugin for renaming JavaScript properties
JavaScript
19
star
25

legacy-compat

React 15 compatibility layer for Preact
JavaScript
16
star
26

preact-netlify

Preact's netlify CMS template
JavaScript
15
star
27

playwright-ct

Preact adapter for Playwright Component testing
TypeScript
15
star
28

compat-alias-package

JavaScript
10
star
29

babel-plugin-transform-hook-names

Add custom hook names for devtools
TypeScript
7
star
30

migrate-preact-x

JavaScript
6
star
31

preact-cli-experiment

TypeScript
4
star
32

codesandbox-template

JavaScript
4
star
33

.github

Default community files for the PreactJS organization
3
star