wigly

0.5.16 • Public • Published

gzip size

Wigly

A React inspired, component-based UI library for the web. Built with Superfine. Built to be lean.

Live example

https://codepen.io/minieggs40/project/editor/AEyxBx

'Hello, World!' example

import wigly from "wigly";
 
function App(props) {
  return <div>{props.greeting}, World!</div>;
}
 
wigly.render(<App greeting="Hello" />, document.body);

Stateful counter example

import wigly, { state } from "wigly";
 
function Counter() {
  var [count, set] = state(0);
 
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onclick={set(count + 1)}>increment</button>
    </div>
  );
}
 
wigly.render(<Counter />, document.body);

Using AJAX calls

import wigly, { state, effect } from "wigly";
 
function App(props) {
  var [username, set] = state();
 
  // Optional second parameter, will only call first parameter when userId value changes.
  // If no second paramter is given the first parameter will be called after every render.
  // Operates the exact same as React's useEffect.
  effect(
    async function() {
      var request = await fetch(`/get/user/${props.userId}`);
      var result = await request.json();
      set(result.username);
    },
    [props.userId]
  );
 
  return (
    <div>
      <div>{username ? `Username: ${username}` : "loading"}</div>
    </div>
  );
}
 
wigly.render(<App userId={123} />, document.body);

Advanced, lazy/async components

import wigly from "wigly";
 
// A function that returns a promise that will resolve to a
// component can be used as a valid wigly component.
let LazyChild = () => import("./components/child");
 
let App = () => (
  <div>
    <LazyChild />
  </div>
);
 
wigly.render(<App />, document.body);

Advanced, creating a 'styled-components' package

import wigly, { state, effect } from "wigly";
import tags from "dom-tags";
import stringcss from "string-css";
 
let styled = tags.reduce(
  (fns, key) => ({
    ...fns,
    [key]: style => props => {
      let [classes] = state(stringcss.css(style));
      effect(stringcss.inject, 0);
      return wigly.h(key, {
        ...props,
        class: props.class ? `${classes} ${props.class}` : classes
      });
    }
  }),
  {}
);
 
let Title = styled.h1`
  color: #121212;
  font-family: nyt-cheltenham, georgia, "times new roman", times, serif;
  font-weight: 700;
  font-style: italic;
`;
 
wigly.render(<Title>Your Styled Component Here</Title>, document.body);

Readme

Keywords

none

Package Sidebar

Install

npm i wigly

Weekly Downloads

4

Version

0.5.16

License

none

Unpacked Size

30.1 kB

Total Files

8

Last publish

Collaborators

  • minieggs40