# @ajnauleau/custom-components > 'Simple Custom Web Components for your Project' Latest version **1.0.10** (published 2020-05-03) · MIT license · 0 weekly downloads ## Install ```sh npm install @ajnauleau/custom-components pnpm add @ajnauleau/custom-components yarn add @ajnauleau/custom-components bun add @ajnauleau/custom-components ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.10 | | Published | 2020-05-03 | | First published | 2020-04-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 299.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | ajnauleau | | Maintainers | ajnauleau | | Keywords | styled, custom, components, web, css, react, javascript | ## Links - npm: https://www.npmjs.com/package/@ajnauleau/custom-components - Repository: https://github.com/ajnauleau/custom-components - Homepage: https://github.com/ajnauleau/custom-components#readme - Issues: https://github.com/ajnauleau/custom-components/issues - npm.io page: https://npm.io/package/@ajnauleau/custom-components ## Recent versions - 1.0.10 (latest) — 2020-05-03 - 1.0.9 — 2020-05-01 - 1.0.8 — 2020-05-01 - 1.0.7 — 2020-05-01 - 1.0.6 — 2020-05-01 - 1.0.5 — 2020-05-01 - 1.0.4 — 2020-05-01 - 1.0.3 — 2020-04-30 ## README ## Custom Web Components

Make and style custom web components easily! ## Installation ```node $ npm install --save @ajnauleau/custom-components ``` ## Style First start out by adding css styles to your component: ```javascript import { Component } from '@ajnauleau/custom-components'; const Custom = Component.styled` color: red; background: black; `; ``` ## Extend Extend your component by adding any valid HTML between template literals ` `` `: ```javascript class WebComponent extends Custom { constructor() { super(); } render() { let world = 'world'; return ( `

hello ${world}

` ) } } ``` ## Render Render your new web component and give it a custom name. REMEMBER! Web component names must use a hyphen (-). ```javascript customElements.define('custom-component', WebComponent); ``` ## Result Embed and link your javascript, then use your new custom component. ```html ``` ## Summary Here's the complete javascript file for your reference. ```javascript import Component from '@ajnauleau/custom-components'; const Custom = Component.styled` color: red; background: black; `; class WebComponent extends Custom { constructor() { super(); } render() { return ( `

hello

` ) } } customElements.define('custom-component', WebComponent); ``` __________________________________________________________

Coming Soon!

## Access Props Attribute to Props, similar to React ## Lifecycle constructor() render() componentDidMount() componentDidUpdate() componentWillUnmount() --- _Source: https://npm.io/package/@ajnauleau/custom-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._