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 …

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



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>



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.


Print Share Comment Cite Upload Translate
APA
Aiden Bai | Sciencx (2024-03-28T19:06:07+00:00) » Hacky: *Fun*ctional component-based UI library. Retrieved from https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/.
MLA
" » Hacky: *Fun*ctional component-based UI library." Aiden Bai | Sciencx - Saturday August 7, 2021, https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/
HARVARD
Aiden Bai | Sciencx Saturday August 7, 2021 » Hacky: *Fun*ctional component-based UI library., viewed 2024-03-28T19:06:07+00:00,<https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/>
VANCOUVER
Aiden Bai | Sciencx - » Hacky: *Fun*ctional component-based UI library. [Internet]. [Accessed 2024-03-28T19:06:07+00:00]. Available from: https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/
CHICAGO
" » Hacky: *Fun*ctional component-based UI library." Aiden Bai | Sciencx - Accessed 2024-03-28T19:06:07+00:00. https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/
IEEE
" » Hacky: *Fun*ctional component-based UI library." Aiden Bai | Sciencx [Online]. Available: https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/. [Accessed: 2024-03-28T19:06:07+00:00]
rf:citation
» Hacky: *Fun*ctional component-based UI library | Aiden Bai | Sciencx | https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/ | 2024-03-28T19:06:07+00:00
https://github.com/addpipe/simple-recorderjs-demo