Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@storybook/store
Advanced tools
@storybook/store is a package that provides the core state management functionality for Storybook. It helps manage the state of stories, including their parameters, args, globals, and more. This package is essential for maintaining the state consistency and reactivity of Storybook's UI components.
State Management
This feature allows you to create and manage the state of your stories, including their parameters, args, and globals. The code sample demonstrates how to create a store, set its state, and retrieve the current state.
import { createStore } from '@storybook/store';
const store = createStore({
stories: {},
parameters: {},
args: {},
globals: {}
});
store.setState({
stories: { 'example-story': { id: 'example-story', name: 'Example Story' } },
args: { 'example-story': { arg1: 'value1' } }
});
console.log(store.getState());
Reactive State Updates
This feature allows you to subscribe to state changes and react to updates. The code sample demonstrates how to subscribe to state changes and log the updated state whenever it changes.
import { createStore } from '@storybook/store';
const store = createStore({
stories: {},
parameters: {},
args: {},
globals: {}
});
store.subscribe((state) => {
console.log('State updated:', state);
});
store.setState({
args: { 'example-story': { arg1: 'new-value' } }
});
Parameter Management
This feature allows you to manage parameters for your stories. The code sample demonstrates how to set parameters for a story and retrieve them from the store.
import { createStore } from '@storybook/store';
const store = createStore({
stories: {},
parameters: {},
args: {},
globals: {}
});
store.setState({
parameters: { 'example-story': { param1: 'value1' } }
});
console.log(store.getState().parameters);
Redux is a popular state management library for JavaScript applications. It provides a predictable state container and is often used with React. Compared to @storybook/store, Redux is more general-purpose and can be used for a wide range of applications, not just Storybook.
MobX is a state management library that makes state management simple and scalable by transparently applying functional reactive programming. It is more flexible and less opinionated than Redux, making it easier to integrate with various frameworks. Like Redux, MobX is more general-purpose compared to @storybook/store.
Zustand is a small, fast, and scalable state management solution for React. It provides a minimalistic API and is easy to use. Zustand is similar to @storybook/store in that it is lightweight and focused on simplicity, but it is designed specifically for React applications.
The contents of this package have moved to @storybook/preview-api
. Please update your import.
This package will no longer be released as part of the 8.0 release of storybook.
7.6.12
upgrade
detecting the wrong version of existing Storybooks - #25752, thanks @JReinhold!FAQs
Unknown package
The npm package @storybook/store receives a total of 1,413,673 weekly downloads. As such, @storybook/store popularity was classified as popular.
We found that @storybook/store demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 26 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.