React-c2c-ui NPM

C2C-UI

React UI kits with styled-components & typescript

Description

This is a beta version library. It might have no problem to use. But It might have cross-browsing issues and some bugs. It will be fixed.

Installation

// npm
npm install react-c2c-ui

// yarn
yarn add react-c2c-ui

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'react-c2c-ui';

function App() {
    return (
        <Button theme="secondary">
            Hello World
        </Button>
    );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Updated the Select component(0.7.7)

add typeable options (typeable, typeablePlaceholder)
add up position of listbox render: depends on Select's position of screen You can check this in Docs page

Changed props of Popup component

Props of Popup are changed from 0.7.3 version. Removed onClickTrigger, onClose props and added setTarget.

    ...
    const [popupTarget, setPopupTarget] = useState("");
    return (
        <div>
            <Popup 
                ... // required props and other props you want
                name={"popup1"}
                setTarget={(target:string)=>{
                    // Add code lines that can change `target` value
                    setPopupTarget(target);
                }}
                target={popupTarget}
            />
            <Popup 
                ... // required props and other props you want
                name={"popup2"}
                setTarget={(target:string)=>{
                    // Add code lines that can change `target` value
                    setPopupTarget(target);
                }}
                target={popupTarget}
            />
        </div>
    )

Deleted Dropdown, DropdownMulti

The Dropdown and DropdownMulti are not able to use from 0.7.0 version. Please use the Select component instead of the Dropdown and DropdownMulti.

    /** Same as Dropdown */ 
    <Select 
        ... // required props and other props you want
        multiple={false} // or skip this prop
    />
    
    /** Same as DropdownMulti */ 
    <Select 
        ... // required props and other props you want
        multiple // or multiple={true}
    />