lilactown / Helix
Licence: epl-2.0
A simple, easy to use library for React development in ClojureScript.
Stars: β 235
Programming Languages
Projects that are alternatives of or similar to Helix
React Hooks Helper
A custom React Hooks library that gives you custom hooks for your code.
Stars: β 227 (-3.4%)
Mutual labels: hooks
Windows User Action Hook
A .NET library to subscribe for Windows operating system global user actions such mouse, keyboard, clipboard & print events
Stars: β 224 (-4.68%)
Mutual labels: hooks
Use Async Effect
π Asynchronous side effects, without the nonsense
Stars: β 193 (-17.87%)
Mutual labels: hooks
Vue 2 3
βοΈ Interop Vue 2 components in Vue 3 apps and vice versa
Stars: β 231 (-1.7%)
Mutual labels: interop
Reusable
Reusable is a library for state management using React hooks
Stars: β 207 (-11.91%)
Mutual labels: hooks
Use Undo
React Hooks to implement Undo and Redo functionality
Stars: β 224 (-4.68%)
Mutual labels: hooks
React Table
βοΈ Hooks for building fast and extendable tables and datagrids for React
Stars: β 15,739 (+6597.45%)
Mutual labels: hooks
Resolvers
π Validation resolvers: Zod, Yup, Joi, Superstruct, and Vest.
Stars: β 222 (-5.53%)
Mutual labels: hooks
Use Position
π React hook usePosition() for fetching and following a browser geolocation
Stars: β 230 (-2.13%)
Mutual labels: hooks
Vue Cnode
π εΊδΊvue3 function-based ζε»Ίcnodeη€ΎεΊ
Stars: β 192 (-18.3%)
Mutual labels: hooks
React Native Swiper Flatlist
π Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: β 217 (-7.66%)
Mutual labels: hooks
Inline syscall
Inline syscalls made easy for windows on clang
Stars: β 232 (-1.28%)
Mutual labels: hooks
React Native Easy Starter
A react-native starter kit using RN0.63, Flipper support, LogBox, AndroidX, Hooks workflow, easy-peasy, code-push, Themes support and much more
Stars: β 224 (-4.68%)
Mutual labels: hooks
Helix
ClojureScript optimized for modern React development.
(ns my-app.core
(:require [helix.core :refer [defnc $]]
[helix.hooks :as hooks]
[helix.dom :as d]
["react-dom" :as rdom]))
;; define components using the `defnc` macro
(defnc greeting
"A component which greets a user."
[{:keys [name]}]
;; use helix.dom to create DOM elements
(d/div "Hello, " (d/strong name) "!"))
(defnc app []
(let [[state set-state] (hooks/use-state {:name "Helix User"})]
(d/div
(d/h1 "Welcome!")
;; create elements out of components
($ greeting {:name (:name state)})
(d/input {:value (:name state)
:on-change #(set-state assoc :name (.. % -target -value))}))))
;; start your app with your favorite React renderer
(rdom/render ($ app) (js/document.getElementById "app"))
Installation
Install the latest version from clojars in your project.
A version of "react" and "react-refresh" should be installed automatically; install the corresponding version of your favorite renderer (e.g. "react-dom").
shadow-cljs and npm
During development, you'll want to emit ES6 code until polyfills are handled differently. You can do this by passing in a dev compiler configuration:
;; shadow-cljs.edn
{,,,
:builds
{:app
{,,,
:dev {:compiler-options {:output-feature-set :es6}}}}}
Release builds should be able to emit all the way back to ES3.
shadow-cljs and react-native
See React Native.
lein-cljsbuild / figwheel-main / raw CLJS
Use CLJSJS or package
react yourself using webpack, ensuring it is provided as the name "react"
.
Documentation
- Why Helix
- Creating Components
- Creating elements
- Hooks
- Experiments
- Pro-tips
- Frequently Asked Questions
- React Native
Other resources:
License
Copyright Β© 2020 Will Acton
Distributed under the EPL 2.0
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].