Quick-proto-kit NPM

Quick Prototyping kit

Demo

Documentation

https://quick-proto-kit.gitbook.io/go

Install

Quick proto Kit is based on styled-compoenents. To use it you must install all of these.

npm install --save styled-components

npm install --save quick-proto-kit

Usage

import React, { Component } from 'react'

import {View, Text, Image, Stack} from 'quick-proto-kit'

class Example extends Component {
  render () {
    return (
      <Stack horizontal mid bg={'#ffffff'} height={'200px'} >
          <View width={'100px'} height={'100px'} bg={'#f5f5f5'} />
          <View width={'100px'} height={'100px'} bg={'#efeff4'} />

      </Stack>

    )
  }
}

Documentation

Stack

Layout

Property	Meaning	Syntac
horizontal	Align all child elements horizontally	`<Stack horizontal />`
vertical	Align all child elements vertically	`<Stack vertical />`
center	center all child element horizontaly	`<Stack center />`
mid	center all child element vertically	`<Stack mid />`
top	Top Align all child elements	`<Stack top />`
bottom	Bottom Align all child elements	`<Stack bottom />`
left	Left Align all child elements	`<Stack left />`
right	Right Align all child elements	`<Stack right />`

Alignment

Property	Meaning	Syntac
center	center all child element horizontaly	`<Stack center />`
mid	center all child element vertically	`<Stack mid />`
top	Top Align all child elements	`<Stack top />`
bottom	Bottom Align all child elements	`<Stack bottom />`
left	Left Align all child elements	`<Stack left />`
right	Right Align all child elements	`<Stack right />`

View

Dimensions

Property	syntax
Height	`<View height={'value'} />`
Width	`<View width={'value'} />`

Colors

Property	syntax	detail
Background color	`<View bg={'value'} />`	Value: '#ffffff' or 'themeColor'
Text color	`<View color={'value'} />`	Value: '#ffffff' or 'themeColor'

Shadow

Property	syntax	detail
Shadow	`<View boxShadow={'value'} />`	Value: 'themeShadow'

Border Radius

Property	purpose	syntax
specific	Add a border radius of '10px'	`<View borderRadius={'10px'} />`
curved	Add a border radius of 6px	`<View curved />`
more-curved	Add a border radius of 12px	`<View more-curved />`
round	Add a border radius of 100%, this will make a circle if the view is squre	`<View curved />`
default	No border	-