This content originally appeared on DEV Community and was authored by Aiden Bai
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.
This content originally appeared on DEV Community and was authored by Aiden Bai
Aiden Bai | Sciencx (2021-08-07T08:58:21+00:00) Hacky: *Fun*ctional component-based UI library. Retrieved from https://www.scien.cx/2021/08/07/hacky-functional-component-based-ui-library/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.