react-custom-elements

react-custom-elements

yarn add react-custom-elements

npm install react-custom-elements

Buttons

Button elements with props

import { Button } form 'react-custom-elements';

const App = () => {
    return(
        <>
            <Button primary>defuult</Button>
            <Button secondary>text</Button>
            <Button outline></Button>
            <Button dark></Button>
        </>
    )
}

You can use all events of button

For example click event

import { Button } form 'react-custom-elements';

const App = () => {
    return(
        <>
            <Button
            onClick={()=> alert('clicked  ')}
            primary>defuult</Button>

        </>
    )
}

Input

primary

secondary

import { Input } form 'react-custom-elements';

const App = () => {
    return(
        <>
            <Input primary></Input>
            <Input secondary></Input>
        </>
    )
}

You can use all input props with it

import { Input } form 'react-custom-elements';

const App = () => {
    return(
        <>
            <Input onChange={(e) => console.log(e.target.value)} secondary></Input>
        </>
    )
}

Props	initial value
width	260px
height	20px
...props	all props of input

CheckBox

import { CheckBox } form 'react-custom-elements';

const App = () => {
    return(
        <>
            <CheckBox ></CheckBox>
        </>
    )
}

get check value

import React, {useState} from 'react';
import { CheckBox } form 'react-custom-elements';

const App = () => {

    const [val, setVal] = useState(false);

    return(
        <>
            <CheckBox setClick={setVal}></CheckBox>
        </>
    )
}

Now checkbox value in val variable

Props	initial value
w	24px
h	24px
color	#111
bg	#111
borderRadius	999px

Dropdown

import { Dropdown } form 'react-custom-elements';

const App = () => {
    return(
        <>
            <Dropdown selections=['1', '2', '3']></Dropdown>
        </>
    )
}

get dropdown selected value

import React, {useState} from 'react';
import { Dropdown } form 'react-custom-elements';

const App = () => {

    const [SelectedValue, setSelectedValue] = useState(false);

    return(
        <>
            <Dropdown select={setSelectedValue}></Dropdown>
        </>
    )
}

in SelectedValue we have our selected value

Props	initial value	Type	Example
selections	none	array	['1', '2', '3']