Fawn Components

A simple components package for modern web

fawn-componets

fawn-components is a simple custom components package for the modern web. It is built on web components, so it is supported in web frameworks like react, vue, angular etc.

Collections

PWA Components

Button

As easy as HTML

fawn-components is just an HTML element. You can use it anywhere you can use HTML!

<fn-pwa-btn value="Custom PWA Install"></fn-pwa-btn>

Configure with attributes

<fn-ripple-btn> can be configured with attributed in plain HTML.

<fn-ripple-btn background="red">Click me</fn-ripple-btn>

Ripple button

Configure with events

<fn-ripple-btn> can be configured to listen for click event

<fn-ripple-btn>Click me</fn-ripple-btn>

In javascript

const button = document.querySelector('fn-ripple-btn');
button.addEventListener('fn-click', () => console.log('button is clicked'))

Click me

Declarative rendering

fawn-components can be used with declarative rendering libraries like Angular, React, Vue, and lit-html

import React from 'react';

const App = () => (
  <h2>This is fawn components</h2>
  <fn-ripple-btn>Hurray</fn-ripple-btn>
)

This is fawn components

Hurray