Introducing the New JSXBasedSnaps UI Component Library

METAMASK ·

새로운 JSX 기반 UI 시스템이 맞춤형 컴포넌트와 향상된 인터랙티비티로 Snap 개발을 어떻게 더 쉽게 만드는지 알아보세요. We’ve introduced an industry-standard, easier-to-work-with JSX-based UI system that allows developers to create Snap UIs more easily and customize their Snaps UI even more than was previously possible. This replaces the previous function-based component system, which offered little flexibility. With this new UI library, developers can build interfaces with custom props and even make their own template components. Additionally, this new system includes UX components that enable various interactive use cases, such as positioning, button variants, dropdowns, and more. Itoffers a better developer experience for defining inline styling, eliminating the challenges we encountered using Markdown. The previous UI library is still supported but is considered deprecated. We will remove it at some point in the future. We urge Snaps developers to migrate their UI code to the new JSX-based system as soon as possible. In addition to simplifying the creation of Custom UIs, we've shipped two new interactive JSX components that don’t have equivalent function-based components: Dropdown and Field . These components will allow you to bring more interactivity and better user experiences to your Custom UIs. The new Box component replaces the panel component and adds positioning and direction options. This allows you to create richer UIs that better fit your use cases. Markdown has been replaced with Bold , Italic , and Link components. These make it easier to work with formatted text. We will continue to add new components to the JSX API. The JSX API allows you to create your own components, just like in React. You can either import existing components from @metamask/snaps-sdk/jsx , or compose your own custom components. Here’s a simple example: import { Box , Form , Input , Button } from '@metamask/snaps-sdk/jsx' export const MyCustomForm = ( props ) => ( Box > Form name = "form-to-fill" > Input name = "user-name" placeholder = "Your name" / > Box direction = "horizontal" > Button type = "submit" > Submit / Button > { props . isCancellable && Button type = "button" name = "cancel" > Cancel / Button > } / Box > / Form > / Box > ) ; 복사 Upgrade an existing Snap project Here is an overview of the steps required to upgrade an existing Snap project to JSX: Modify the linting rules to allow full usage of JSX components. Rename the Snap’s source file to index.tsx if it contains JSX. Adjust the Snap CLI’s configuration to point to index.tsx. Edit the Snap’s tsconfig.json file to enable JSX. These steps are detailed in our documentation on upgrading a Snap project to use JSX . Our template Snap monorepo is already set up to get you started. You can create a new Snap project from the monorepo using the command: The snap/src/index.tsx file provides an example of using Custom UI with JSX. You can import components from @metamask/snaps-sdk/jsx , and use them to build your UI. Refer to our Custom UI with JSX documentation to learn about all the components and their props, as well as explore this sample Snap with JSX . 개발자 Collab.Land과 MetaMask가 새로운 트랜잭션 프리미티브의 길을 여는 방법 Collab.Land과 MetaMask의 Delegation Toolkit이 스마트 계정으로 web3 트랜잭션을 재정의합니다. 개발자 MetaMask Grants DAO로 성공적인 보조금 제안서 제출하는 방법 MetaMask Grants DAO 팀의 팁을 통해 펀딩 신청 시 그랜트 획득 가능성을 높이세요. 개발자 올바른 이더리움 API RPC 공급자를 선택하는 방법 올바른 이더리움 API RPC 제공업체 선택 시 고려해야 할 주요 요소

AI 시장 분석

MetaMask has launched a new JSX-based UI library replacing the existing functional UI system. With this update, developers can build more flexible and customized Snap UI using enhanced interactive components such as dropdowns and fields. The improved developer experience is expected to accelerate application development speed within the ecosystem and further elevate user experience.

상승 영향

AI가 생성한 분석으로 투자 자문이 아닙니다.

DYAX Investor Sentiment

Bullish (Long) 46% · Bearish (Short) 54%

327 participants

Related News

원문 보기 — METAMASK