be-button

    1.0.2 • Public • Published

    title: Button description: How to add interactive quizzes to your site.

    Button

    An advance button component that should render nicely on any platform. Supports a great level of customization.

    Installation

    Since the library is a JS-based solution, to install the latest version of be-button you only need to run:

    npm install --save be-button

    or

    yarn add be-button

    Examples

    Basic :

    import Button from "be-button";
    ---
    <Button onPress={() => console.log("Button Pressed")}>
        Learn More
    </Button>
    Basic

    Outline :

    import Button from "be-button";
    ---
    <Button outline onPress={() => console.log("Button Pressed")}>
        Learn More
    </Button>
    Basic

    advance :

    import Button from "be-button";
    ---
     <Button
        color="error"
        textColor="black"
        textStyle={ { fontSize: 30 } }
        containerStyle={ { padding: 60, borderStyle: "dashed" } }
        borderColor="#666"
        borderWidth={6}
        radius={25}
        opacity={0.5}
        textTransform="uppercase"
        onPress={() => console.log("Button Pressed")}
        >
        Learn More
    </Button>
    Basic

    With Icon :

    import Button from "be-button";
    import Icon, { RegularIcons } from "be-icon";
    ---
    <Button
        icon={<Icon icon={RegularIcons.smileWink} style={ { paddingRight: 10 } } />}
        color="transparent"
        containerStyle={ {  width: "100%", height: 100 } }
        borderColor="primary"
        borderWidth={1}
        textColor="primary"
        onPress={() => console.log("Button Pressed")}
        >
        NICE !!
    </Button>
    Basic

    loading :

    import Button from "be-button";
    ---
    <Button
        loading
        loadingColor="error"
        loadingSize="large"
        color="transparent"
        containerStyle={ { borderStyle: "dashed" } }
        borderColor="error"
        borderWidth={1}
        radius={40}
        onPress={() => console.log("Button Pressed")}
    />
    Basic

    Custom Content :

    import Button from "be-button";
    import { Image } from "react-native";
    ---
    <Button
        color="transparent"
        containerStyle={ { width: 100, height: 100 } }
        borderColor="#ff9900"
        borderWidth={1}
        onPress={() => console.log("Button Pressed")}
        >
        <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/Ksp1jHy.png" } } />
    </Button>
    Basic

    TouchableHighlight :

    import Button from "be-button";
    import { Image } from "react-native";
    ---
    <Button
        type="TouchableHighlight"
        opacity={1}
        onShowUnderlay={() =>
        <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/dNSN9D7.png" } } />}
        underlayStyle={ { width: 105, height: 105 } }
        containerStyle={ { width: 100, height: 100 } }
        borderColor="#ff9900"
        underlayColor="success"
        borderWidth={1}
        onPress={() => console.log("Button Pressed")}
        >
        <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/LgkZkOG.png" } } />
    </Button>
    Unpressed Pressed
    Basic Basic

    Props


    Reference

    onPress

    Handler to be called when the user taps the button

    Type Required
    function Yes

    type

    TouchableOpacity selected by default, so when press Button down, the opacity of the wrapped view is decreased, dimming it. if you want to change the background color or even the entire component when you press the button down then you need to change the type to TouchableHighlight

    Type Required Default
    TouchableOpacity,TouchableHighlight No TouchableOpacity

    containerStyle

    override button container style for example if you want to change width,height,padding,....

    Type Required
    style No

    color

    Background color of the button

    Type Required Default
    be-color No primary

    textColor

    Text color of the button ( only if the children is string)

    Type Required Default
    be-color No white in default case, primary in outline mode

    textTransform

    set Text Transform ( only if the children is string)

    Type Required Default
    'lowercase', 'uppercase','capitalize' No Not Set

    textStyle

    override button text style for example if you want to change fontSize,... ( only if the children is string)

    Type Required
    style No

    borderColor

    border color of the button , will active if the borderWidth prop great than 0 or the button outline prop set to true

    Type Required Default
    be-color No primary

    borderWidth

    border width of the button you can change border style using containerStyle prop

    Type Required Default
    Number No BETheme.SIZES.BORDER_WIDTH

    radius

    Button border radius of the button to make it circle you need to set width = height & radius = button width / 2

    Type Required Default
    Number No BETheme.SIZES.BORDER_RADIUS

    disabled

    If true, disable all interactions for this component.

    Type Required Default
    bool No false

    shadow

    If true, show shadow effect for this component.

    Type Required Default
    bool No false

    outline

    If true make an outline button,by set the default text color to primary set background color to transparent and finally set border width to 1, you can ovveride these styles.

    Type Required Default
    bool No false

    opacity

    Determines what the opacity of the Button should be when touch is active.

    Type Required Default
    Number No BETheme.SIZES.OPACITY

    loading

    If true we show react native activity indicator instead of the button content.

    Type Required Default
    bool No false

    loadingColor

    set Loading indicator color , will active if loading prop set to true

    Type Required Default
    be-color No primary

    loadingSize

    Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.

    Type Required Default
    enum('small', 'large'),number No small

    underlayColor

    Background color of the button when pressed , only if the button type is TouchableHighlight

    Type Required Default
    be-color No primary

    underlayStyle

    override button container style when pressed this will keep the container styles and push the new style , only if the button type is TouchableHighlight

    Type Required
    style No

    Install

    npm i be-button

    DownloadsWeekly Downloads

    7

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • lockcommerce