Home

Awesome

<p> <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=%20" alt="Solid Primitives"> </p>

Solid Primitives

pnpm turborepo<!-- INSERT-NPM-DOWNLOADS-BADGE:START --> combined-downloads

<!-- INSERT-NPM-DOWNLOADS-BADGE:END -->

A project that strives to develop high-quality, community contributed Solid primitives. All utilities are well tested and continuously maintained. Every contribution to the repository is checked for quality and maintained to the highest degree of excellence. The ultimate goal is to extend Solid's primary and secondary primitives with a set of tertiary primitives.

While Solid Primitives is not officially maintained by the SolidJS Core Team, it is managed by members of the SolidJS core and ecosystem teams. This separation allows the core library to iterate independently while allowing Solid Primitives to remain in-sync with future plans.

Philosophy

The goal of Solid Primitives is to wrap client and server side functionality to provide a fully reactive API layer. Ultimately the more rooted our tertiary primitives are, the more they act as foundation within Solid's base ecosystem. With well built and re-used foundations, the smaller (aggregate tree-shaking benefits), more concise (readability) and stable (consistent and managed testing + maintenance) applications can be overall.

Primitives

<!-- INSERT-PRIMITIVES-TABLE:START -->
NameStagePrimitivesSizeNPM
<h4>Inputs</h4>
active-elementSTAGEcreateActiveElement<br />createFocusSignalSIZEVERSION
autofocusSTAGEautofocus<br />createAutofocusSIZEVERSION
input-maskSTAGEcreateInputMask<br />createMaskPatternSIZEVERSION
keyboardSTAGEuseKeyDownList<br />useCurrentlyHeldKey<br />useKeyDownSequence<br />createKeyHold<br />createShortcutSIZEVERSION
mouseSTAGEcreateMousePosition<br />createPositionToElementSIZEVERSION
pointerSTAGEcreatePointerListeners<br />createPerPointerListeners<br />createPointerPosition<br />createPointerListSIZEVERSION
scrollSTAGEcreateScrollPosition<br />useWindowScrollPositionSIZEVERSION
selectionSTAGEcreateSelectionSIZEVERSION
<h4>Display & Media</h4>
audioSTAGEmakeAudio<br />makeAudioPlayer<br />createAudioSIZEVERSION
boundsSTAGEcreateElementBoundsSIZEVERSION
devicesSTAGEcreateDevices<br />createMicrophones<br />createSpeakers<br />createCameras<br />createAccelerometer<br />createGyroscopeSIZEVERSION
filesystemSTAGEcreateFileSystem<br />createSyncFileSystem<br />createAsyncFileSystem<br />makeNoFileSystem<br />makeNoAsyncFileSystem<br />makeVirtualFileSystem<br />makeWebAccessFileSystem<br />makeNodeFileSystem<br />makeTauriFileSystem<br />makeChokidarWatcher<br />rsyncSIZEVERSION
idleSTAGEcreateIdleTimerSIZEVERSION
intersection-observerSTAGEcreateIntersectionObserver<br />createViewportObserver<br />createVisibilityObserverSIZEVERSION
mediaSTAGEmakeMediaQueryListener<br />createMediaQuery<br />createBreakpoints<br />usePrefersDarkSIZEVERSION
page-visibilitySTAGEcreatePageVisibilitySIZEVERSION
resize-observerSTAGEcreateResizeObserver<br />createWindowSize<br />createElementSizeSIZEVERSION
stylesSTAGEcreateRemSizeSIZEVERSION
<h4>Browser APIs</h4>
broadcast-channelSTAGEmakeBroadcastChannel<br />createBroadcastChannelSIZEVERSION
clipboardSTAGEcopyClipboard<br />writeClipboard<br />createClipboardSIZEVERSION
event-listenerSTAGEcreateEventListener<br />createEventSignal<br />createEventListenerMap<br />WindowEventListener<br />DocumentEventListenerSIZEVERSION
event-propsSTAGEcreateEventPropsSIZEVERSION
fullscreenSTAGEcreateFullscreenSIZEVERSION
geolocationSTAGEcreateGeolocation<br />createGeolocationWatcherSIZEVERSION
mutation-observerSTAGEcreateMutationObserverSIZEVERSION
permissionSTAGEcreatePermissionSIZEVERSION
storageSTAGEmakePersisted<br />cookieStorage<br />tauriStorage<br />multiplexStorage<br />storageSync<br />messageSync<br />wsSync<br />multiplexSync<br />addClearMethod<br />addWithOptionsMethod<br />makeObjectStorageSIZEVERSION
timerSTAGEmakeTimer<br />createTimer<br />createTimeoutLoop<br />createPolled<br />createIntervalCounterSIZEVERSION
uploadSTAGEcreateFileUploader<br />createDropzoneSIZEVERSION
workersSTAGEcreateWorker<br />createWorkerPool<br />createSignaledWorkerSIZEVERSION
<h4>Network</h4>
connectivitySTAGEcreateConnectivitySignalSIZEVERSION
cookiesSTAGEcreateServerCookie<br />createUserTheme<br />getCookiesStringSIZEVERSION
fetchSTAGEcreateFetchSIZEVERSION
graphqlSTAGEcreateGraphQLClientSIZEVERSION
streamSTAGEcreateStream<br />createAmplitudeStream<br />createMediaPermissionRequest<br />createAmplitudeFromStream<br />createScreenSIZEVERSION
websocketSTAGEmakeWS<br />createWS<br />createWSState<br />makeReconnectingWS<br />createReconnectingWS<br />makeHeartbeatWSSIZEVERSION
<h4>Control Flow</h4>
contextSTAGEcreateContextProvider<br />MultiProviderSIZEVERSION
jsx-tokenizerSTAGEcreateTokenizer<br />createToken<br />resolveTokens<br />isTokenSIZEVERSION
keyedSTAGEkeyArray<br />Key<br />EntriesSIZEVERSION
listSTAGElistArray<br />ListSIZEVERSION
rangeSTAGErepeat<br />mapRange<br />indexRange<br />Repeat<br />Range<br />IndexRangeSIZEVERSION
refsSTAGEmergeRefs<br />resolveElements<br />resolveFirst<br />Ref<br />RefsSIZEVERSION
<h4>Utilities</h4>
controlled-propsSTAGEcreateControlledPropSIZEVERSION
cursorSTAGEcreateElementCursor<br />createBodyCursorSIZEVERSION
dateSTAGEcreateDate<br />createDateNow<br />createTimeDifference<br />createTimeDifferenceFromNow<br />createTimeAgo<br />createCountdown<br />createCountdownFromNowSIZEVERSION
event-busSTAGEcreateEventBus<br />createEmitter<br />createEventHub<br />createEventStackSIZEVERSION
event-dispatcherSTAGEcreateEventDispatcherSIZEVERSION
flux-storeSTAGEcreateFluxStore<br />createFluxFactory<br />createActions<br />createActionSIZEVERSION
historySTAGEcreateUndoHistorySIZEVERSION
i18nSTAGEflatten<br />resolveTemplate<br />translator<br />scopedTranslator<br />chainedTranslatorSIZEVERSION
platformSTAGEList of variablesSIZEVERSION
promiseSTAGEpromiseTimeout<br />raceTimeout<br />untilSIZEVERSION
propsSTAGEcombineProps<br />filterPropsSIZEVERSION
scheduledSTAGEdebounce<br />throttle<br />scheduleIdle<br />leading<br />createScheduled<br />leadingAndTrailingSIZEVERSION
script-loaderSTAGEcreateScriptLoaderSIZEVERSION
shareSTAGEcreateSocialShare<br />createWebShareSIZEVERSION
<h4>Reactivity</h4>
deepSTAGEtrackDeep<br />trackStore<br />captureStoreUpdatesSIZEVERSION
destructureSTAGEdestructureSIZEVERSION
immutableSTAGEcreateImmutableSIZEVERSION
lifecycleSTAGEcreateIsMounted<br />isHydrated<br />onConnectSIZEVERSION
mapSTAGEReactiveMap<br />ReactiveWeakMapSIZEVERSION
memoSTAGEcreateLatest<br />createLatestMany<br />createWritableMemo<br />createLazyMemo<br />createPureReaction<br />createMemoCache<br />createReducerSIZEVERSION
mutableSTAGEcreateMutable<br />modifyMutableSIZEVERSION
resourceSTAGEcreateAggregated<br />createDeepSignal<br />makeAbortable<br />createAbortable<br />makeCache<br />makeRetryingSIZEVERSION
rootlessSTAGEcreateSubRoot<br />createCallback<br />createDisposable<br />createSharedRoot<br />createRootPoolSIZEVERSION
setSTAGEReactiveSet<br />ReactiveWeakSetSIZEVERSION
signal-buildersSTAGEList of buildersSIZEVERSION
state-machineSTAGEcreateMachineSIZEVERSION
static-storeSTAGEcreateStaticStore<br />createDerivedStaticStoreSIZEVERSION
triggerSTAGEcreateTrigger<br />createTriggerCacheSIZEVERSION
<h4>UI Patterns</h4>
markerSTAGEcreateMarkerSIZEVERSION
masonrySTAGEcreateMasonrySIZEVERSION
paginationSTAGEcreatePagination<br />createInfiniteScrollSIZEVERSION
virtualSTAGEcreateVirutalList<br />VirtualListSIZEVERSION
<h4>Animation</h4>
presenceSTAGEcreatePresenceSIZEVERSION
rafSTAGEcreateRAF<br />createMs<br />targetFPSSIZEVERSION
springSTAGEcreateSpring<br />createDerivedSpringSIZEVERSION
transition-groupSTAGEcreateSwitchTransition<br />createListTransitionSIZEVERSION
tweenSTAGEcreateTweenSIZEVERSION
<!-- INSERT-PRIMITIVES-TABLE:END -->