skills.rest
webiny
webinyOFFICIAL
Explore all skills by this author →
Website𝕏@WebinyCMSGitHub

webiny-admin-local-storage-catalog

Catalogs Webiny admin localStorage abstractions with import paths and source references.

8.0k|673|Updated Jan 9, 2018
Search Tags:#React hooks#admin#Dependency Injection#LocalStorage#webiny#browser storage
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-local-storage-catalog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webiny-admin-local-storage-catalog
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/generated/admin/local-storage
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-local-storage-catalog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers working in the Webiny admin app often need to persist UI state in browser localStorage but must locate the correct abstraction, hook, and import path across the codebase. This Skill provides a catalog of the four localStorage abstractions so you can pick the right one and import it correctly.

Core Features & Use Cases

  • Abstraction Catalog: Lists LocalStorage, useLocalStorage, useLocalStorageValue, and useLocalStorageValues with exact import statements and source file locations.
  • Reactive Hooks: useLocalStorageValue and useLocalStorageValues observe storage keys and re-render components when values change.
  • DI Access: useLocalStorage returns the LocalStorage instance from dependency injection for imperative service calls inside components.
  • Use Case: When building a Webiny admin extension that remembers a user's panel collapse state, look up useLocalStorageValue, read its source file for the exact interface, and import it from "webiny/admin/local-storage".

Quick Start

Ask the AI to show you which Webiny localStorage hook to use for observing a storage key in a React component and provide its import statement.

Frequently Asked Questions about webiny-admin-local-storage-catalog

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use localStorage in a Webiny admin React component?▼

Import useLocalStorageValue or useLocalStorageValues from "webiny/admin/local-storage" to observe storage keys reactively. The component re-renders automatically when any observed key changes.

What is the difference between useLocalStorage and useLocalStorageValue in Webiny?▼

useLocalStorage returns the LocalStorage service instance from dependency injection for imperative method calls. useLocalStorageValue observes a specific key and triggers re-renders when its value changes.

How do I observe multiple localStorage keys in Webiny admin?▼

Use useLocalStorageValues from "webiny/admin/local-storage". It observes multiple keys and returns an object mapping each key to its value, re-rendering when any observed key changes.

Where is the Webiny LocalStorage abstraction defined?▼

The LocalStorage abstraction is defined in @webiny/app/features/localStorage/abstractions.ts, while the React hooks live in @webiny/app/presentation/localStorage/index.ts. Read these source files for exact interfaces and types.

When should I use the LocalStorage service instead of the hooks?▼

Use the LocalStorage service via useLocalStorage when you need imperative calls outside render logic, such as in event handlers or callbacks. Use the hooks when the UI must react to storage changes.

Related Skills

Explore More Software Engineering Skills→
fycd2006fycd2006

admin-developer

Build and wire admin features with React views, DI, and MobX.

Community
Advanced
trusted-americantrusted-american

ember-local-storage

Persist Ember.js UI state in localStorage with reactive decorators.

Official
Advanced
ihj04982ihj04982

defer-state-reads-to-usage-point

Defer dynamic state reads to usage points in React components.

Community
Basic
artagonartagon

openspec-new-change

Create an OpenSpec change directory from a natural-language request.

Official
Intermediate