Epic-chip-react-native NPM

Epic React Native Chip

An elegant & fully customizable chip 🚀

Epic Chip React Native

Features

🌟 Full customizable.
Smooth & faster animation.
Support IOS and, Android.
Compatible with Expo.
Written in TypeScript.

Getting Started

For npm Type npm i epic-chip-react-native to install it on your project.

For yarn do yarn add epic-chip-react-native.

Important

Please install React Native Vector Icons npm i react-native-vector-icons @types/react-native-vector-icons.

Installation

Use npm or yarn to install the library

NPM: npm i epic-chip-react-native

Yarn: yarn add epic-chip-react-native

import { EpicChip } from 'epic-chip-react-native';

const App = () => {
  return <EpicChip labelOptions={{label: "Epic Chip"}} />;
}

export detault App;

Using Ref

You can also toggle chip using ref hook.

import { EpicChip, EpicChipRef } from 'epic-chip-react-native';

const App = () => {

const EpicChipRef = useRef<EpicChipRef>(null);

  return (
    <>
        <EpicChip 
        ref={EpicChipRef} 
        labelOptions={{label: "Epic Chip"}} 
        onChange={e => console.log(e)} // print boolean;
        />
        
        </View style={{marginVertical: 30}}>
            <Button 
            onPress={()=> EpicChipRef.current?.toggleCheck()}>
            Toggle Chip
            </Button>
        </View> 
        
    </>
  );
}

export detault App;

Props

name	description	required	type	default
`labelOptions`	Chip label options includes `label`, `Icon`.	NO	`string` or `JSX Element`
`options`	Chip options, `chipStyles`, `labelStyles`, `backgroundColor`, `labelColor`	NO	`chipStyles`: `StyleProp<ViewStyle>`, `labelStyles`: `StyleProp<TextStyle>`, `backgroundColor`: {`focusColor`: `#hexCode`, `inActiveColor`: `#hexCode`}, `labelColor`: {`focusColor`: `#hexCode`, `inActiveColor`: `#hexCode`}
`type`	Chip type	NO	`Mini`, `Micro`, `Large`
`mode`	Chip mode.	NO	`Outlined`, `Solid`	`Outlined`
`checkIcon`	If you want to hide the checkmark icon, just make it false.	NO	`boolean`	false
`radius`	Border Radius of the chip.	NO	number	15
`isChecked`	you can specify a default value.	NO	`boolean`
`isDisabled`	For disabling the chip`. \| NO \| 'boolean' \| false
`checkedIcon`	Changing the default check icon`. \| NO \| React.ReactNode
`onChange`	Callback on item change	NO	(value: boolean) => void
`ref`	ref hook `toggleCheck() // void function`	NO