soperdev-proton v1.1.2

SOPERDEV Proton

This package allows users to add futuristic buttons, fast and using few lines of code. Easy to set up. Simple yet effective tool, you can use it on any platform.

Installation

 npm i soperdev-proton 

Importing

import {Button} from 'soperdev-proton';

Usage

This is easy to use and you need only this code to use the futuristic buttons.

<Button/>

Propertise

contain: Displays the text in the button
Example:
<Button contain="Press Me">

bgColor: Specifies the backgroung color of the button
Example:
<Button contain="Press Me" bgColor="red">

onPress: Specifies what to do when the button is pressed
Example:
<Button contain="Press Me" bgColor="red" onPress={}>

type: Specifies the type of the button 
Example:
<Button contain="Press Me" bgColor="red" onPress={} type="circle">

marginTop: Specifies the Top margin of the button.
           Left and Right margin is not supported as the button will 
           be in center of the page.
           * To specify bottom margin values must be written in     
           negative.
Example:
<Button contain="Press Me" bgColor="red" onPress={} type="circle" marginTop={50}>

Possible Values for type:

1. circle
2. round
3. dynamic
4. neon

Note : When the type is neon, the button will not render bgColor 
       Although you will not encounter any error, if written.

Example

import * as React from 'react';
import {View,Text} from 'react-native';
import {Button} from 'soperdev-proton';


export default class App extends React.Component{
constructor(){
  super()
  this.state={
    text:'Hello'
  }
}

  render(){
    return(
      <View style={{flex:1,backgroundColor:'#000'}}>
      <Text style={{color:'#fff'}}>{this.state.text}</Text>
      <Button contain="Circle" type="circle" bgColor="red"  marginTop={100} onPress={()=>{this.setState({text:'Hello Friend, I Am Circle'})}}/>
      <Button contain="Round" type="round" bgColor="#50A0EF" marginTop={50} onPress={()=>{this.setState({text:'Hello Friend, I am Round'})}}/>
      <Button contain="Dynamic" type="dynamic" bgColor="#FFBA01" marginTop={50} onPress={()=>{this.setState({text:'Hello Friend, I am Dynamic'})}}/>
      <Button contain="Neon" type="neon" bgColor="orange" marginTop={50}  onPress={()=>{this.setState({text:'Hello Friend, I am Neon'})}}/>
      
      </View>
    )
  }
}

Click Here to view the live snack

License

MIT © @soperdev_official

More Packages SOPERDEV

visit - https://www.soperdev.com/packages