stimulus-store
Version:
Lightweight state management for Stimulus.js
156 lines (124 loc) âĒ 8.85 kB
Markdown
<div align="center">
<a target="_blank" href="https://www.change.org/p/sign-and-share-this-urgent-petition-calling-for-a-ceasefirenow-in-gaza-and-israel" alt="Cease Fire in Gaza Now!">
<img src="https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-support.svg" alt="Stimulus Store Logo"/>
</a>
</div>
<p align="center">
<a target="_blank" href="https://www.stimulus-store.com" alt="Stimulus Store Documentation site">
<img src="images/stimulus_store_logo.png" alt="Stimulus Store Logo"/>
</a>
</p>
<div align="center">
[](https://github.com/omarluq/stimulus-store)
[](https://github.com/omarluq/stimulus-store/actions/workflows/test.yml)
[](https://netlify.com)
[](https://github.com/omarluq/stimulus-store/commits/main)
[](https://github.com/omarluq/stimulus-store/graphs/commit-activity)
[](https://github.com/omarluq/stimulus-store/graphs/contributors)
[](https://github.com/omarluq/stimulus-store/pulls)
[](https://github.com/omarluq/stimulus-store/pulls?q=is%3Apr+is%3Aclosed)
[](https://github.com/omarluq/stimulus-store/issues)
[](https://github.com/omarluq/stimulus-store)
[](https://github.com/omarluq/stimulus-store/stargazers)
[](https://github.com/omarluq/stimulus-store/network/members)
[](https://github.com/omarluq/stimulus-store/watchers)
[](https://www.typescriptlang.org)
[](https://biomejs.dev)
[](https://codeclimate.com/github/omarluq/stimulus-store/maintainability)
[](https://codeclimate.com/github/omarluq/stimulus-store/test_coverage)
[](https://npmjs.com/package/stimulus-store)
[](https://npmjs.com/package/stimulus-store)
[](https://bundlephobia.com/result?p=stimulus-store@0.0.2)
[](https://bundlephobia.com/result?p=stimulus-store@0.0.2)
[](https://bundlephobia.com/result?p=stimulus-store@0.0.2)
[](https://github.com/omarluq/stimulus-store)
[](https://github.com/omarluq/stimulus-store)
[](https://github.com/omarluq/stimulus-store)
[](https://dependabot.com)
[](https://github.com/omarluq/stimulus-store)
[](https://discord.gg/ScU4JKgxaU)
</div>
</br>
<p align="center">
<b>Ultra lightweight state management for your Stimulus powered web applications.</b>
</p>
</br>
- **Create and manage global state with ease.** ð
- **Share state between different controllers effortlessly using a unified, atomic `Store` class.** ð
- **1.04KB Minified and Brotlied** ðŠķ
## Installation
### With a build system
Install with [npm](https://www.npmjs.com/):
```sh
npm install stimulus-store
```
Install with [yarn](https://yarnpkg.com):
```sh
yarn add stimulus-store
```
### UMD
If you prefer not to use a build system, you can load `stimulus-store` in a `<script>` tag and it will be globally available through the `window.StimulusStore` object.
```html
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
<script src="https://unpkg.com/stimulus-store/dist/bundle.umd.js"></script>
<script>
(() => {
const application = Stimulus.Application.start();
const helloStore = StimulusStore.createStore({
name: "myStore",
type: String,
initialValue: "Hello World!",
});
application.register(
"hello",
class extends Stimulus.Controller {
static stores = [helloStore];
connect() {
StimulusStore.useStore(this);
this.element.innerHtml = `<p>${this.helloStoreValue}</p>`;
}
}
);
})();
</script>
</head>
<body>
<div data-controller="hello">âĶ</div>
</body>
</html>
```
## Documentation
complete documentation on Stimulus Store, including guides, API details, and more can be found on [www.stimulus-store.com](https://www.stimulus-store.com).
## Contributors âĻ
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/tcarac"><img src="https://avatars.githubusercontent.com/u/64477810?v=4?s=100" width="100px;" alt="Tomas Caraccia"/><br /><sub><b>Tomas Caraccia</b></sub></a><br /><a href="https://github.com/omarluq/stimulus-store/commits?author=tcarac" title="Code">ðŧ</a> <a href="https://github.com/omarluq/stimulus-store/commits?author=tcarac" title="Tests">â ïļ</a> <a href="https://github.com/omarluq/stimulus-store/commits?author=tcarac" title="Documentation">ð</a> <a href="#maintenance-tcarac" title="Maintenance">ð§</a> <a href="https://github.com/omarluq/stimulus-store/pulls?q=is%3Apr+reviewed-by%3Atcarac" title="Reviewed Pull Requests">ð</a> <a href="#question-tcarac" title="Answering Questions">ðŽ</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://omarluq.github.io/portfolio/"><img src="https://avatars.githubusercontent.com/u/84993125?v=4?s=100" width="100px;" alt="Omar Luq "/><br /><sub><b>Omar Luq </b></sub></a><br /><a href="https://github.com/omarluq/stimulus-store/commits?author=omarluq" title="Code">ðŧ</a> <a href="https://github.com/omarluq/stimulus-store/commits?author=omarluq" title="Tests">â ïļ</a> <a href="https://github.com/omarluq/stimulus-store/commits?author=omarluq" title="Documentation">ð</a> <a href="#maintenance-omarluq" title="Maintenance">ð§</a> <a href="https://github.com/omarluq/stimulus-store/pulls?q=is%3Apr+reviewed-by%3Aomarluq" title="Reviewed Pull Requests">ð</a> <a href="#question-omarluq" title="Answering Questions">ðŽ</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center" size="13px" colspan="7">
<img src="https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg">
<a href="https://all-contributors.js.org/docs/en/bot/usage">Add your contributions</a>
</img>
</td>
</tr>
</tfoot>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
</br>
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.