The library offers a set of layout components based on Chakra UI that make it easy to style your components by passing props.

Table of contents

• 📦 Installation
• 💻 Usage
• 📋 Components
• 🚀 Style Props
• 💖 Support

Installation

To use Jutsu UI components, all you need to do is install jutsu-ui package in your project:

$ yarn add jutsu-ui
    
# or
	
$ npm i jutsu-ui

Usage

It's very simple to use the components of Jutsu UI, only import and create amazing layouts:

import { Flex, Text } from "jutsu-ui"

function Example(){
	return(
		<Flex justifyContent="center" alignItens="center">
			<Text color="red">Using Jutsu with the energy of ⚡️Chakra!</Text>
		</Flex>
	) 
}

Components

The components are divided in 4 types:

1. Typography
2. Button
3. Layout
4. Input

Image component is in development ⚠️

Typography

To create custom texts you must use the Text component:

import { Text } from "jutsu-ui"

function Title(){
	return (
		<Text color="black" textAlign="center" fontWeight="bold">Use Justu to create amazing apps</Text>
	)
}

See React Native Text Props

Button

Jutsu Button has the same behavior of TouchableOpacity:

import { Button } from "jutsu-ui"

function ExampleBtn(){
	return (
		<Button color="black" bgColor="red" px="10px" py="5px" onPress={() => console.log("Clicked!")} title="Click to like Jutsu!"/>
	)
}

Layout

To create layouts you could use Flex or Box, which has the same behavior of View:

import { Flex, Text, Box } from "jutsu-ui"

function ExampleFlex(){
	return(
		<Flex justifyContent="center" alignItens="center">
			<Text color="red">Using Jutsu with the energy of ⚡️Chakra!</Text>
		</Flex>
	) 
}

function ExampleBox(){
	return(
		<Box bgColor="black" borderRadius={10}>
			<Text color="red">Using Jutsu with the energy of ⚡️Chakra!</Text>
		</Box>
	) 
}

Input

In some cases it's hard to customize our forms on our style, but Jutsu UI makes more simple with the same behavior and props of TextInput:

import { Alert } from "react-native"
import { Flex, Input, Button, Text } from "jutsu-ui"
import { useForm, useController } from "react-hook-form"

function ControlledInput({ control, name, label }){
	const { field } = useController({
		control,
		defaultValue: '',
		name,
	})
	
	return(
		<>
			<Text fontSize="">{label}</Text>
			<Input value={field.value} onChangeText={field.onChange} bgColor="blue" px="10px" py="5px"/>
		</>
	)
}

function ExampleForm(){
	const { control, handleSubmit } = useForm()
	const onSubmit = (data) => Alert.alert(JSON.stringify(data))
	
	return(
		<Flex justifyContent="center" alignItens="center" w="100%">
			<ControlledInput control={control} name="example"/>
			<Button onPress={handleSubmit(onSubmit)} title="Submit Form"/>
		</Flex>
	) 
}

The example above uses the react-form-hook library, see the official documentation.

Style Props

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Margin and Padding:

| Prop | React Native Prop | Type | |:------|:-------------------|:------:| | mt, marginTop | marginTop | Size | | mb, marginBotton | marginBotton | Size | | ml, marginLeft | marginLeft | Size | | mr, marginRight | marginRight | Size | | mx, marginX | marginHorizontal| Size | | my, marginY | marginVertical| Size | | pt, paddingTop | paddingTop | Size | | pb, paddingBotton | paddingBotton | Size | | pr, paddingRight | paddingRight | Size | | pl, paddingLeft | paddingLeft | Size | | px, paddingX | paddingHorizontal | Size | |py, paddingY | paddingVertical | Size|

Size type: ${number}px | ${number}em | ${number}% | number

Color and Background Color:

| Prop | React Native Prop | Type | |:------|:-------------------|:------:| |bgColor, backgroundColor | backgroundColor | Color | |color| color | Color | | opacity | opacity | number |

Color type: See Color Reference · React Native

Border:

| Prop | React Native Prop | Type | |:------|:-------------------|:------:| | border | border | string | | borderColor | borderColor | Color | | borderBottomWidth | borderBottomWidth | number | | borderEndWidth | borderEndWidth | number | | borderLeftWidth | borderLeftWidth | number | | borderRightWidth | borderRightWidth | number | | borderStartWidth | borderStartWidth | number | | borderTopWidth | borderTopWidth | number | | borderWidth | borderWidth | number | | borderRadius | borderRadius | number |

Layout:

| Prop | React Native Prop | Type | |:------|:-------------------|:------:| | display | display | "flex","none" | |h, height| height | Size | |w, width | width | Size | | maxW, maxWidth | maxWidth | Size | | minW, minWidth | minWidth | Size | | maxH, maxHeight | maxHeight | Size | | minH, minHeight | minHeight | Size| | position | position | "relative","absolute"| | overflow | overflow | "visible","hidden","scroll"| | zIndex | zIndex | number | | top | top | Size | | bottom | bottom | Size | | left | left | Size | | right | right | Size |

Flexbox:

| Prop | React Native Prop | Type | |:------|:-------------------|:------:| | flex | flex | number| | flexDirection | flexDirection | "row","row-reverse","column","column-reverse" | | flexWrap | flexWrap | "nowrap","wrap","wrap-reverse" | | direction | direction | "inherit","ltr","rtl" | | justifyContent | justifyContent | "flex-start","flex-end","center","space-between","space-around", "space-evenly"| | alignItems | alignItems | "flex-start","flex-end","center","stretch","baseline"| | flexShrink | flexShrink | number | | flexGrow | flexGrow | number | | flexBasis | flexBasis | Size |

Typography:

| Prop | React Native Prop | Type | |:------|:-------------------|:------:| | fontFamily | fontFamily | string | | fontSize | fontSize | Size | | fontStyle | fontStyle | "normal", "italic"| | fontWeight | fontWeight | 'normal', 'bold', '100', '200', '300', '400','500','600','700','800','900'| | textAlign | textAlign | 'auto','left','right','center','justify'

Support Jutsu UI

Jutsu UI could help a lot of developers to create amazing mobile interfaces around the world, if you want to see more features and support our team: