jutsu-ui v2.0.1

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:

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

Color and Background Color:

Color type: See Color Reference · React Native

Border:

Layout:

Flexbox:

Typography:

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: