Skip to content
A React inspired, component-based UI library for the web. Built with Superfine. Built to be lean.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
example
src
test
.gitignore
.npmignore
LICENSE.md
README.md
index.d.ts
package-lock.json
package.json

README.md

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);
You can’t perform that action at this time.