Top
Zippytech React Toolkit - Introduction
Zippytech React Toolkit
Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React, that can be easily integrated into existing or new applications.
We've gone through a lot of iterations to make sure we provide a rich and flexible component set that is actually useful and helps you speed-up app development.
We focus on building components so you can focus on what actually matters to you - building & shipping your app faster to the market.
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 Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
Most of our components are open-source - namely everything in the React Toolkit at @zippytech/react-toolkit, licensed under the MIT license and published on github.
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:
  1. getting a commercial license - see the Pricing page and buy a license.
  2. we'll provide you with a username and password
  3. 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.
  4. login with your username for the @zippytech scope, on the private registry:
    $ npm login --registry=https://registry.zippytech.io --scope=@zippytech
    
    This will keep you logged-in with your current npm username outside of the @zippytech scope.
  5. check you are correctly logged-in for our private registry.
    $ npm whoami --registry=https://registry.zippytech.io
    
    This should display the username from step 2.
After those install steps, you should be able to install the DataGrid as usual:
$ npm install @zippytech/react-datagrid-pro --save
All the components available in the toolkit are listed in the sidebar of this documentation. In order to use any component, you have to import the component and its corresponding css file.
import React from 'react'

import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const onClick = () => {
  console.log('Clicked')
}

export default () => <Button onClick={onClick}>
  Zippytech React Toolkit
</Button>
Don't forget to import the component css file, using import '@zippytech/react-toolkit/Button/index.css'.
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.