docs: readme

1 files changed, 68 insertions, 0 deletions

diff --git a/docs/api/hooks.md b/docs/api/hooks.md
new file mode 100644
index 0000000..663df66
--- /dev/null
+++ b/docs/api/hooks.md
@@ -0,0 +1,68 @@
+# Element hooks
+
+```css
+#my-element {
+  --cssx-on-mount: /* code */;
+  --cssx-on-update: /* code */;
+  --cssx-on-click: /* code */;
+}
+```
+
+
+## Mount
+
+Mount is mount. Remember when react used to call it that? Yeah, fun times.
+It'll allow you to run code as soon as the element in the dom.
+
+```css
+#my-element {
+  --cssx-on-mount: add-class('animate');
+}
+```
+
+
+## Update
+
+The way you manage state in css-everything is as css custom properties.
+Sometimes you may need to react to those changes. That's where the update hook comes in.
+The update hook gets called every time a css property on the element is updated via the `update` function.
+
+NOTE: Update hook is only called for the element that gets updated, not it's children.
+
+```css
+#my-element {
+  background-color: Salmon;
+  color: PowderBlue;
+
+  --my-state: false;
+  --cssx-on-update: if(get-var(--my-state), add-class('some-state'), remove-class('some-state'));
+
+  --cssx-children: button#my-btn;
+}
+
+#my-element.some-state {
+  background-color: PapayaWhip;
+  color: SeaShell;
+}
+
+/* #my-btn has access to --is-visible because it is #my-element's child */
+#my-btn {
+  --cssx-on-click: update(my-element, --is-visible, if(get-var(--my-state), true, false));
+}
+```
+
+
+## Events
+
+Other than the above 2 events, the rest are just standard browser events.
+
+Only the following are supported as of right now as my fingers are typing this out -
+
+- `--cssx-on-click`
+- `--cssx-on-focus`
+- `--cssx-on-blur`
+- `--cssx-on-submit`
+
+Adding support for most other events is pretty trivial. I'm just kinda lazy.
+
+