When we started building the toolkit, we've made a checklist of features that our components need to include out-of-the-box:

Performance - a component is only useful if it's zippy. Performance is generally not a concern with smaller components like buttons, dialogs, color pickers, etc - but menus, lists and grids need a lot of performance considerations in order to be really snappy. On the other hands, when we built the Demo CRM we found out that even small components, can cause performance problems when used in a complex app, with a lot of DOM nesting. Therefore, all components need to carefully consider their interaction with the DOM - even in the case of React. We've made the extra step to build the Demo CRM for the very purpose of making sure all components play nice with each-other.

Simplicity - components need to be simple to use in the most common scenario. For this, default values for components have been carefully considered, so you need to add a minimum of code when you want to add some custom property and/or logic.

Look & feel - by default, components need to look carefully crafted & pretty. This leads us to the next consideration, which is:

Theming - all components need to have an easy to understand theming mechanism. We're well aware of the shift to css-in-js, css modules and inline-styling, but for the purpose of reusable components and simplicity everyone can understand, we've decided to stick with the BEM methodology. In this way, when you choose Zippytech React Toolkit you're free to keep your existing styling solution in your app.

Functionality - the most common usage patterns for a component should be already built-in. For example, you should be able to easily configure a menu for single selection or a Window to resize proportionally.

Flexibility & extensibility - all components need to be very flexible in adapting to a wide spectrum of needs. Changing some styles, replacing some rendering logic or adding a custom validation should all be possible and easily achievable.

Consistency - designing components that work well with each other is crucial. You'll probably find many excellent but singular UI components - but a consistent & coherent toolkit does make a difference in how fast you can develop your app.

RTL - right-to-left support is very spotty in open-source UI components. We're trying to fix that.

Zippytech React Datagrid Pro and Zippytech React Scheduler are commercial components and as such, they are distributed via a private npm registry (https://registry.zippytech.io). So getting them installed requires the following additional steps:

getting a commercial license - see the Pricing page and buy a license.

we'll provide you with a username and password

point your npm client to the correct registry for components scoped inside the @zippytech scope.

$ npm config set @zippytech:registry https://registry.zippytech.io

Even though you are setting the private registry for the @zippytech scope, you will still be able to use our open-source components, since the private registry forwards any requests for our free components to the public npm registry.

login with your username for the @zippytech scope, on the private registry:

The import pattern is the same for all components, so you need to import ComponentName from '@zippytech/react-toolkit/ComponentName'.

Named imports are also available - but they are not supported in the online editor used throughout this documentation!

import React from 'react'
import { Button } from '@zippytech/react-toolkit'
// import { ComponentName } from '@zippytech/react-toolkit'
// you can also import the css file with
// the styles for all the components in the toolkit
import '@zippytech/react-toolkit/index.css'

Read more about basic usage of toolkit components at the Getting Started page. You'll find out more details on how you can import either all toolkit code or separate components and styles.

Almost all the code snippets in the documentation are both executable and editable. You can:

click the

Run code

button to run the snippet.

click the

View code

button for viewing the code.

The snippet editor expects that you export default a function - the value returned by the function will be rendered into the page, so it should be a valid React.Node.

export default () => 'Welcome to Zippytech React Toolkit'

For now, the editor does not support named imports - so make sure you import the components directly from their own files - so import Button from 'react-toolkit/Button' instead of import { Button } from 'react-toolkit'. Of course, in your app code, you can use named imports - though they are likely to make your app bundle larger.

Also note that you can't import any other npm packages inside the code editor, besides the components in the sidebar (and of course React).

You can navigate this documentation either by using the side menu on the left, or the next/prev links below, or you can press the n key (from next) or the p key (from prev) to navigate to the next/prev page in the docs.