website·Indexed 42 days ago
https://twigs.surveysparrow.comA React component library by SurveySparrow featuring a comprehensive set of UI elements including Accordion, AlertDialog, Calendar, DatePicker, DialogsManager, FormInput, and various layout components like Flex and Grid.
@ followed by a letter. This dropdown displays a list of mentionable users filtered by the user's input. The plugin allows for custom result fetching and custom trigger logic.:). The dropdown filters emojis based on the characters typed after the colon. By default, the plugin uses the gemoji emoji list.Box component is a fundamental layout primitive used to wrap content and apply custom styling. By default, it renders as a div element, but it can be configured to render as any other HTML element using the as prop.import { Box } from "@sparrowengg/twigs-react";
const MyComponent = () => (
<Box>The quick brown fox jumps over the lazy dog.</Box>
);css prop for direct styling, design tokens for consistency, and a variant system for customization.triggerFunction to detect when the menu should appear and a getResults function to populate the menu items.tools prop, you can directly add tool components as children to the EditorToolbar. You can use built-in tools (like BoldTool or ItalicTool) imported from @sparrowengg/twigs-editor-react or your own custom components.import {
Editor,
EditorToolbar,
BoldTool,
ItalicTool
} from "@sparrowengg/twigs-editor-react";
<Editor>
<EditorToolbar>
<BoldTool />
<ItalicTool />
{/* Other custom components can be added here */}
</EditorToolbar>
</Editor>components prop to override parts of the slider (such as Track, Range, or Thumb), define these components as separate functions outside the main component. This prevents unnecessary re-renders and ensures better performance and state handling.components prop to override the Container, Step, or Separator elements, avoid defining components inline. Instead, render each custom component as a separate function defined outside the main component. This prevents unnecessary re-renders and ensures better state handling and maintainability./ to open a menu), build a plugin using the EditorLookupDropdownBase component. This requires a trigger function based on a regular expression to detect the slash character and a component to handle the dropdown rendering and item selection.import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $getSelection, $isTextNode } from "lexical";
import { EditorLookupDropdownBase } from "@sparrowengg/twigs-editor-react";
export const SlashesPlugin = () => {
const [editor] = useLexicalComposerContext();
const commands = [
{ label: "Show alert", value: "show-alert" },
{ label: "Show prompt", value: "show-prompt" },
{ label: "Show confirm", value: "show-confirm" },
];
return (
<EditorLookupDropdownBase
getResults={(searchString) => {
return commands.filter((command) =>
command.label
.toLowerCase()
.includes((searchString || "").toLowerCase())
);
}}
triggerFunction={(text) => getPossibleQueryMatch(text)}
onMenuItemSelect={(item, closeMenu) => {
let promptValue = '';
if (item.data.value === "show-alert") {
alert("Alert!");
} else if (item.data.value === "show-prompt") {
promptValue = prompt("Prompt!");
} else if (item.data.value === "show-confirm") {
confirm("Confirm!");
}
editor.update(() => {
const selection = $getSelection();
const nodes = selection?.getNodes();
if (nodes?.[0] && $isTextNode(nodes[0])) {
nodes[0].setTextContent(promptValue || '');
}
});
closeMenu();
return true; // Prevents default action after selection
}}
/>
);
};Heading component provides a way to render headings with specific visual styles. Note that changing the size prop only affects the font size and line height; it does not change the underlying HTML element. To change the semantic HTML element (e.g., rendering a visually small heading as an <h1>), use the as prop.import { Heading } from "@sparrowengg/twigs-react";
const HeadingExample = () => {
return (
<>
{/* Visual H1, Bold weight */}
<Heading size="h1" weight="bold">Heading 1 - Bold</Heading>
{/* Visual H5, but rendered as <h1> for SEO/Accessibility */}
<Heading size="h5" as="h1">Heading 5 as H1</Heading>
</>
);
};selectable prop to true. You can control the active state using the active prop or set an initial state with defaultActive. Use onActiveStateChange to handle state transitions._app.tsx. Because _app.tsx handles client-side routing and state, a separate provider wrapper is not required.// pages/_app.tsx
import { ThemeProvider } from '@sparrowengg/twigs-react';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}