SUMMARY.md

Table of contents

• Atomico
• Getting started with Atomico
• Getting started with Atomico for React users
• What can you do with Atomico?
  • You can create amazing webcomponents
  • You can create design systems
  • You can create websites
  • You can create mobile applications
  • You can create web applications

API

• Props(Properties)
  • Value cycle as prop
  • Is it advisable to declare events using the props API?
• VirtualDOM
  • Advanced
• Hooks
  • useProp
  • useEvent
  • useRef
  • useHost
  • useState
  • useReducer
  • useEffect, useLayoutEffect and useInsertionEffect
  • useMemo and useCallback
  • useUpdate
  • useId
  • useContext
    • useProvider
  • usePromise
  • useAsync and useSuspense
  • useAbortController
• Testing
  • Render cycle
  • atomico/test-hooks
  • atomico/test-dom

Guides

• 🤔 Frequent questions
  • Is it advisable to declare events using the props API?
  • How to declare events for your component at the type level for TSX?
  • When and why to use shadowDom?
  • Can I use Atomico in browsers without ESM support?
• 🤩 Component
  • Naming
  • CSS Styles with Shadow DOM
• 🛡️ Atomico with Typescript
  • Props
  • Component
  • Meta-types
    • Type
    • Event declaration
    • Method declaration
  • Check the correct use of hooks
• 🤝 Atomico and React
  • Integrating Atomico in React
  • From React to Atomico
    • Rendering Differences
    • VirtualDOM api differences
• ⏳ Atomico and Asynchrony
• 🧠 Atomico design patterns
  • ♻️ Webcomponents with hybrid rendering
  • 🔗 Slot as templates
  • 🔀 Slot
• 📖 Atomico and Storybook
  • Frequent questions
• 💧 SSR / SSG
• 🗃️ Archives
  • Class inheritance
  • Forms and shadowDOM
  • Tips
  • Design systems
  • Atomico style guide
    • File structure
      • Monorepo
      • Design systems

packages

• @atomico/hooks
  • useCurrentValue
  • use-intersection-observer
  • use-ref-values
  • use-script
  • use-attributes
  • use-prop-proxy
  • use-click-press
  • use-dollars
  • use-reflect-event
  • use-keyboar
  • use-click-coordinates
  • use-copy
  • use-debounce-state
  • use-form
  • use-listener
  • use-disabled
  • use-css
  • use-channel
  • use-promise
  • use-responsive-state
  • use-parent
  • use-resize-observer
  • use-slot
    • useSlot
    • useProxySlot
  • use-render
  • use-mutation-observer
  • use-css-light-dom
  • use-controller
  • use-router
  • use-async-effect
  • use-child-nodes
  • use-force-render
• @atomico/store
  • Store
• @atomico/storybook
• @atomico/router
• @atomico/vite
  • ⚙️ Process CSS tag template blocks with PostCSS.
  • 🏗️ Compile your code to be distributed optimally as a package.
  • 📕 Use the JSX/TSX syntax of Atomico when using Storybook.
  • 🤖 Automatically create customElements.define
  • ☑️ Support for Vitest for Atomico.
  • 🧙‍♂️ Server actions
• @atomico/exports
  • 🚩 CLI and Flags
  • 🤖 Wrapper for React
• @atomico/components
  • @atomico/keen-slider
  • @atomico/modal
  • @atomico/lottie
  • @atomico/table
• @atomico/react
• @atomico/postcss-tokens
  • Example with @atomico/vite
• @atomico/wrapper
• 🚫 Deprecated
  • @atomico/magic-form
    • MagicFormProvider | <magic-form-provider>
    • MagicForm | <magic-form>
    • MagicForm Hooks
    • MagicForm in React and Preact
    • MagicForm in Microfrontend
    • MagicForm Patterns
  • @atomico/design-tokens
    • @atomico/design-tokens api

Support

• Discord
• Github
• Twitter