Veryfront Logo

Plugins

What Are Veryfront Plugins?  

Veryfront plugins let you extend your projects' capabilities. They expose third-party libraries and services that provide powerful features and integrations.

The platform comes with a bundle of pre-installed plugins covering different capabilities of your app, such as UI, state management, API communication, tracking, e-commerce, search, and more.

What Are Veryfront Plugins Used For?  

Veryfront plugins expose React components in the global namespace, allowing you to compose your apps quickly.

Plugins

Manage Plugins  

You can activate and deactivate plugins under Project Settings > Plugins.

Builder UI Project Settings

After activating a plugin, you can find and use its components from the Insert menu.

Insert Menu Plugins

Use Plugins  

Depending on its usage, each plugin can provide two types of React components: UI Components and Provider Components.

UI Components  

UI components display information and markup on a page.

The Chakra UI plugin, for example, exposes a rich collection of UI components that let you quickly add elements like accordions but also simpler HTML constructs like tables.

<Table variant="simple">
  <TableCaption>Caption</TableCaption>
  <Thead>
    <Tr>
      <Th>Heading 1</Th>
      <Th>Heading 2</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>Value 1</Td>
      <Td>Value 2</Td>
    </Tr>
  </Tbody>
</Table>

Provider Components  

Provider components serve as data sources and interfaces for interacting with third-party code and services. For example, you can use the HTTP Provider plugin to work with APIs or the State Provider plugin to access and mutate state in your app.

Here’s an example of the latter.

<StateProvider initialState={{ count: 0 }}>
  {({ state, setState }) => (
    <Box>
      <Heading>
        You clicked {state.count} times
      </Heading>
      <Button onClick={() => setState({ count: state.count + 1 })}>
        Click me
      </Button>
    </Box>
  )}
</StateProvider>

Note: The only child of a Provider component is a function that receives the provided data and functions as its arguments. This is known as the render prop technique.

Next Steps  

Next, we recommend you to learn more about the Core Components Plugin.

<  ContextCore Components Plugin  >
Veryfront Logo

GDPR
COMPLIANT


© 2022 CoderSociety GmbH. Hosted in Germany.

Made with Veryfront