JSPM – nkrn-checkbox@1.0.3

Package Exports

nkrn-checkbox
nkrn-checkbox/dist/Checkbox.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nkrn-checkbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

# react-native-checkbox

A simple, customizable, and lightweight **Checkbox** component for React Native apps.  
Built with ❤️ by **Narendra Kumar**.

---

## 🚀 Installation

```bash
npm install nkrn-checkbox
# or
yarn add nkrn-checkbox

📦 Import

import Checkbox from 'nkrn-checkbox';

💻 Usage Example

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Checkbox from 'nkrn-checkbox';

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Checkbox
        label="Accept Terms & Conditions"
        checked={checked}
        onChange={setChecked}
        color="#007bff"
        size={24}
      />

      <Text style={{ marginTop: 10 }}>
        {checked ? 'Checked ✅' : 'Unchecked ❌'}
      </Text>
    </View>
  );
}

⚙️ Props Reference

Implementation note: this component maintains internal state initialized from the checked prop. On every toggle it updates internal state and calls onChange(newValue). If you pass checked from a parent and update it in onChange, the parent and component will stay in sync. For a strictly controlled component (where the component always reflects the checked prop even if changed externally), update the component to watch checked via useEffect.

Prop	Type	Default	Required	Description
`label`	`string`	`""`	No	Optional label text shown beside the checkbox.
`checked`	`boolean`	`false`	No*	Initial checked state. See implementation note above.
`onChange`	`(value: boolean) => void`	`undefined`	Yes (recommended)	Called when the checkbox toggles; receives the new boolean value. Use this to update parent state.
`size`	`number`	`24`	No	Size in pixels for the checkbox square (width & height).
`color`	`string`	`#007BFF`	No	Color used when the checkbox is checked (tick / fill).
`disabled`	`boolean`	`false`	No	If `true`, taps are ignored and the checkbox shows a disabled state (not implemented by default — see note).
`labelStyle`	`TextStyle`	`{}`	No	Custom style object for the label `Text`. (If your component doesn't accept this yet, consider adding it to support custom fonts/coloring.)
`containerStyle`	`ViewStyle`	`{}`	No	Custom style for the outer container `View`.

checked is used to initialize state. The component will call onChange every toggle so the parent can keep the value in sync.

🔧 Examples of Prop Usage

No label (only box)

<Checkbox checked={false} onChange={() => {}} />

Custom size & color

<Checkbox label="Large orange box" size={32} color="#FF5722" onChange={val => console.log(val)} />

Controlled-like usage (parent updates state)

const [val, setVal] = useState(false);
<Checkbox checked={val} onChange={setVal} />;

🛠️ Additions You Might Want to Implement

If you want to make the component more feature-rich, consider adding:

disabled rendering (a different style when disabled)
labelStyle & containerStyle support
Accessibility props (accessibilityLabel, accessible, accessibilityState)
Support for custom tick icon (e.g., allow icon prop)
A checkedIcon/uncheckedIcon prop for custom visuals
TypeScript definitions (index.d.ts)

If you want, I can give the exact code changes to add any of these features.

📜 License

---