@farmart/farmart-components-library NPM

Farmart-Components-Library

This npm package was built to create a pool of common Reusable components for our React-Native Projects.We have Integrated our design systema and you can integrate yours too by providing your theme.This is the first version and we are still optimizing it.

Installation

Install @farmart/farmart-components-library with npm

  npm install @farmart/farmart-components-library
  cd my-project

Install @farmart/farmart-components-library with yarn

  yarn add @farmart/farmart-components-library
  cd my-project

Usage/Examples

import React from 'react'
import {Toggle,ThemeProvider,theme, SearchBar,BulletPoint,Label, CheckBox, DropDown,StepperComponent} from '@farmart/farmart-components-library'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { Button, ScrollView, View } from 'react-native'

function App() {
   <GestureHandlerRootView>
        <ThemeProvider value={theme}>

        <SearchBar placeHolder={'Select State'} onChangeText={()=>{}} onClear={()=>{}} />

        <DropDown 
        title='Select' 
        isModalOpen={false} 
        toggleModal={()=>{}} 
        disabled={false}
        data={[]} 
        heading='your_heading'
        onClickItem={()=>{}}
        selectedItem={null}
        isMultipleSelectionAllowed={false}
        />
        <Toggle variant='small' />
        <Toggle variant='large'/>
        <SearchBar placeHolder={'Select State'} onChangeText={()=>{}} onClear={()=>{}} />
        <BulletPoint variant="small" isActive={true}/>
        <BulletPoint variant="large" isActive={false}/>
        <CheckBox variant={'small'} active={true}/>
        <CheckBox variant={'large'} active={false}/>
        <Label varient='infoLow' text='Label'/>
        <Label varient='infoHigh' text='Label'/>
        <Label varient='successLow' text='Label'/>

        <StepperComponent 
            orientation='vertical'
            steps={['Step 1','Step 2','step 3']}
            activeStep={3}
        >
            // {your child component}
        </StepperComponent> 
        
        </ThemeProvider>
    </GestureHandlerRootView>
  
}

export default App