DEV Community

Aiden Bai
Aiden Bai

Posted on

Hacky: *Fun*ctional component-based UI library

You can find the GitHub here: https://github.com/aidenybai/hacky. This was mostly a learning project, but some people could find this useful.


🔧 Hacky

*Fun*ctional component-based UI library

Writing React for applications is alright. Sure, it probably works for most use cases and the DX is great! But some of the time, you just want to limit your potential build a super simple application with basic state and components—That's what Hacky is for!

Plug: Hacky is built on Million, a <1kb compiler-focused virtual DOM. It's fast!

Installing Hacky

It is highly recommended you use a build tool, such as Vite (you can see how we configured our settings under the esbuild field). You can use NPM to directly install.

npm install hacky
Enter fullscreen mode Exit fullscreen mode

Clicker Game Example

Below is an extremely simple implementation of a Clicker Game example using Hacky.

import { render, useState } from 'hacky';

const App =
  ({ props }) =>
  () => {
    const [count, setCount] = useState(props);

    return <button onclick={() => setCount(count + 1)}>{count}</button>;
  };

render(document.querySelector('#app'), <App props={0} />);
// HTML is just <div id="app"></div>
Enter fullscreen mode Exit fullscreen mode

Acknowledgments

Hacky takes heavy inspiration from React, and believes in the core philosophies and values behind Million. Feel free to check them out if you interested in an alternative library to use.

Why is it called "Hacky"? The name originated from a quote from @HeyArav: "Hack Club Framework when"

License

Million is MIT-licensed open-source software by Aiden Bai.

Discussion (1)

Collapse
jasonappah profile image
Jason Antwi-Appah

kinda pog