For instance - you can swap the renderer of your Haunted components. It got my brain racing with the potential of this kind of modularity in composition, and how Haunted allows you accomplish this more effectively with it's functional paradigm. It'd be cool to be able to do the same with web components, take what you need, and output at your desired target (within reason - looking at you native).īut for now we can do cool stuff like sharing hooks between web components and React components because libraries like Haunted create bridges between the APIs. It's the equivalent of creating the Bootstrap of web components - a myriad of projects incorporate Bootstrap in some form into their design systems, from the grid to the components to SASS mixins. Then if needed, other projects using frameworks like React can import components or core functionality to recreate them as React components. I look forward to being able to create a web component library that acts as the basis of the design system's UI. But the factory function also allows you to more easily swap out the hook with another (or your own custom) since it follows the dependency inversion principle. Unpkg import usestate from react code#It does add a bit of extra sugar code that could be circumvented by just using the original hook. It's nothing huge, just more of a convenience thing. You can create web components using functions and add things like state with a simple one-line hook: // Example from import from ' haunted ' export const useDisclosure = createUseDisclosureHook (useState, useCallback) These hooks are framework specific to React, but libraries like HauntedJS have brought them to Web Components. This all accomplished using React's built-in hooks that replicate features you get from class-based components such as state with useState() or hooking into lifecycles with useEffect(). They allow for a lot of functionality to be dropped in as a single line function, like fetching data or handling event listeners. Hooks were a huge movement for React that radically changed the way developers compose their components. Sharing Hooks Between React and Web Components
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |