native-ui-component

Getting Started with Native-io-components

BoxButton Component Usage

The BoxButton component usage example

import {BoxButton} from "./index";

<BoxButton style={style} className={'class names'} onClick={clickHandler}>
    Click me
</BoxButton>

Float Button Component Usage

The Float button component usage example

import {FloatButton} from "./button";

<FloatButton style={style} className={'class names'} onClick={clickHandler}>
    <i className={'fa fa-plus'}></i>
</FloatButton>

Form Component Usage

The Form component is used to generate inputs it has the following props

({builder, style, onSubmit, autofocus, title, onAbort, onCancel, ...props})

The builder prop is used to generate the inputs. here is a sample builder

import {FormElement} from "./form";

const formBuilder = {
    submit: {
        text: 'Submit',
        handler: (e) => {
            e.preventDefault();
        },
        style: // submit button style
    }
    inputs: [
        {
            type: 'email',
            placeholder: 'Enter Email Address',
            default: '',
            readonly: false,
            icon: '',
        },
        {
            type: 'password',
            placeholder: 'Enter Password',
            default: '',
            readonly: false,
            icon: '',
        },

    ]
}

<FormElement builder={formBuilder}/>

To customise the input fields on th form, simply pass an style field on the form builder

const formBuilder = {
    style: {
        marginRight: '100px',
        paddingRight: '30px',
        ...
    },
    ... //other fields
}

You can also multiple inputs side by side by add siblings to the root input

inputs: [
    {
        type: 'text',
        placeholder: 'Enter First Name',
        default: '',
        readonly: false,
        icon: '',
        handler: (e) => {
        },

        siblings: [
            {
                type: 'text',
                placeholder: 'Enter Last Name',
                default: '',
                readonly: false,
                icon: '',
                handler: (e) => {
                }
            },
        ]

    },
]

Card Component

Card component usage example

import Card from "./card";

<Card style={...}>
    <div>
        ...
    </div>
</Card>

this syntax creates a basic card layout that can be customised using the style props

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Learn More

You can learn more in the Create React App documentation.