@codearcade/expo-markdown 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +80 -174
  2. package/dist/index.js +7 -7
  3. package/dist/index.js.map +5 -5
  4. package/package.json +12 -4
package/README.md CHANGED
@@ -1,222 +1,128 @@
1
- # razorpay-expo
1
+ # @codearcade/expo-markdown
2
2
 
3
- A modern, maintained Razorpay SDK for **Expo** and **React Native**.
3
+ A modern, feature-rich Markdown renderer for React applications. Built for **speed**, **customizability**, and **developer experience**.
4
4
 
5
- Built as a community replacement for the outdated official Razorpay
6
- React Native SDK.
7
-
8
- <p align="center">
9
- <img src="docs/demo.gif" alt="Razorpay Expo Demo" width="360" />
10
- </p>
11
-
12
- <p align="center">
13
- <em>Quick demo of the Razorpay Expo SDK in action</em>
14
- </p>
5
+ Packed with **syntax highlighting**, **copy-to-clipboard** functionality, and seamless **dark mode** support out of the box.
15
6
 
16
7
  ---
17
8
 
18
9
  ## ✨ Features
19
10
 
20
- - Works with Expo (WebView-based)
21
- - Modern API with hooks & provider
22
- - No outdated native dependencies
23
- - Designed for real production usage
11
+ - ⚡ **Powered by MarkdownIt**: Robust and reliable rendering using `markdown-it`.
12
+ - 🎨 **Theming Support**: First-class support for Light and Dark modes with customizable colors.
13
+ - 💅 **Syntax Highlighting**: Integrated Prism syntax highlighting (supports themes via toggling).
14
+ - 📋 **Copy Code**: Automatic "Copy to Clipboard" button for all code blocks.
15
+ - 🍭 **GFM Support**: GitHub Flavored Markdown (tables, autolinks, etc.) enabled by default.
16
+ - 🔌 **Plug & Play**: Works instantly with minimal configuration.
24
17
 
25
18
  ---
26
19
 
27
20
  ## Installation
28
21
 
29
- First, install the package and its peer dependencies:
22
+ Install the package via your preferred package manager:
23
+
24
+ ```bash
25
+ npm install @codearcade/expo-markdown
26
+ # or
27
+ yarn add @codearcade/expo-markdown
28
+ # or
29
+ pnpm add @codearcade/expo-markdown
30
+ # or
31
+ bun add @codearcade/expo-markdown
32
+ ```
33
+
34
+ > **Note**: This package requires `expo-clipboard` as a peer dependency for the copy-to-clipboard functionality.
30
35
 
31
36
  ```bash
32
- npm install razorpay-expo
37
+ npx expo install expo-clipboard
33
38
  ```
34
39
 
35
40
  ## Usage
36
41
 
37
- There are two ways to use this library:
42
+ Using `@codearcade/expo-markdown` is simple. Import the `Markdown` component and pass your content string.
38
43
 
39
- 1. **Provider & Hook Usage** (`<RazorpayProvider>` & `useRazorpay`) - **Preferred**.
40
- 2. **Direct Component Usage** (`<RazorpayCheckout />`) - Manual state management.
44
+ ### Basic Usage
41
45
 
42
- ### Method 1: Provider & Hook (Recommended)
46
+ ```tsx
47
+ import { Markdown } from "@codearcade/expo-markdown";
43
48
 
44
- This approach lets you trigger checkout from anywhere in your app.
49
+ const markdown = `
50
+ # Hello World
45
51
 
46
- **1️⃣ Wrap your app with `RazorpayProvider`**
52
+ This is a **markdown** component.
47
53
 
48
- ```tsx
49
- // _layout.tsx or App.tsx
50
- import { RazorpayProvider } from "razorpay-expo";
54
+ \`\`\`javascript
55
+ console.log("Hello from CodeArcade!");
56
+ \`\`\`
57
+ `;
51
58
 
52
- export default function RootLayout() {
59
+ export default function App() {
53
60
  return (
54
- <RazorpayProvider>
55
- <Slot />
56
- </RazorpayProvider>
61
+ <View style={{ flex: 1 }}>
62
+ <Markdown content={markdown} />
63
+ </View>
57
64
  );
58
65
  }
59
66
  ```
60
67
 
61
- **2️⃣ Use `useRazorpay` in your components**
62
-
63
- ```tsx
64
- import React from "react";
65
- import { Button } from "react-native";
66
- import { useRazorpay } from "razorpay-expo";
67
- import { useRouter } from "expo-router";
68
-
69
- export default function PaymentScreen() {
70
- const { openCheckout, closeCheckout } = useRazorpay();
71
- const router = useRouter();
72
-
73
- const handleBuy = async () => {
74
- // 1. Create order on your backend
75
- // const { orderId, currency, amount } = await createOrderOnBackend();
76
-
77
- // For demo purposes:
78
- const currency = "INR";
79
- const amount = 100;
80
- const orderId = "order_RPNBJhnTs2Lq0B"; // Replace with actual order_id from backend
81
-
82
- openCheckout(
83
- {
84
- key: "YOUR_RAZORPAY_KEY",
85
- currency: currency,
86
- amount: amount,
87
- order_id: orderId, // Mandatory: either order_id or subscription_id
88
- name: "Test Company",
89
- image: "https://codearcade.io/logos/logo.png",
90
- description: "Test Transaction",
91
- prefill: {
92
- name: "John Doe",
93
- email: "test@example.com",
94
- contact: "1234567890",
95
- },
96
- theme: {
97
- color: "#ffd35c",
98
- },
99
- },
100
- {
101
- onSuccess: (data) => {
102
- console.log("Payment Success:", data);
103
- closeCheckout();
104
-
105
- // Navigate to success screen
106
- router.replace({
107
- pathname: "/success",
108
- params: {
109
- paymentId: data.razorpay_payment_id,
110
- amount: amount.toString(),
111
- date: new Date().toISOString(),
112
- },
113
- });
114
- },
115
- onFailure: (error) => {
116
- console.log("Payment Failed:", error);
117
- },
118
- onClose: () => {
119
- console.log("Widget closed");
120
- },
121
- },
122
- );
123
- };
124
-
125
- return <Button title="Buy Now" onPress={handleBuy} />;
126
- }
127
- ```
128
-
129
- ### Method 2: Direct Component Usage
68
+ ### Dark Mode & Custom Themes
130
69
 
131
- Use RazorpayCheckout directly and control visibility yourself.
70
+ Easily switch between light and dark modes, and customize the color palette for each mode.
132
71
 
133
72
  ```tsx
134
- import React, { useState } from "react";
135
- import { View, Text, Button, SafeAreaView } from "react-native";
136
- import { RazorpayCheckout } from "razorpay-expo";
73
+ import { useState } from "react";
74
+ import { View } from "react-native";
75
+ import { Markdown } from "@codearcade/expo-markdown";
137
76
 
138
- export default function App() {
139
- const [open, setOpen] = useState(false);
77
+ const myDarkTheme = {
78
+ backgroundColor: "#1e1e1e",
79
+ textColor: "#e0e0e0",
80
+ codeBackgroundColor: "#252526",
81
+ primaryColor: "#569cd6",
82
+ secondaryColor: "#4ec9b0",
83
+ };
84
+
85
+ export default function BlogPost() {
86
+ const [isDarkMode, setIsDarkMode] = useState(false);
140
87
 
141
88
  return (
142
- <SafeAreaView style={{ flex: 1 }}>
143
- <View>
144
- <Text>Home</Text>
145
- <Button title="Buy Now" onPress={() => setOpen(true)} />
146
-
147
- {open && (
148
- <RazorpayCheckout
149
- options={{
150
- key: "YOUR_RAZORPAY_KEY", // e.g., rzp_test_...
151
- currency: "INR",
152
- amount: 100, // Amount in lowest denomination (e.g. 100 paise = 1 INR)
153
- order_id: "order_RPNBJhnTs2Lq0B", // OR subscription_id
154
- name: "Test Company",
155
- image: "https://codearcade.io/logos/logo.png",
156
- description: "Test Transaction",
157
- prefill: {
158
- name: "John Doe",
159
- email: "test@example.com",
160
- contact: "1234567890",
161
- },
162
- notes: {
163
- order_id: "1",
164
- payment_id: "1",
165
- },
166
- theme: {
167
- color: "#ffd35c",
168
- },
169
- }}
170
- onSuccess={(data) => console.log("Success:", data)}
171
- onFailure={(error) => console.log("Failure:", error)}
172
- onClose={() => setOpen(false)}
173
- />
174
- )}
175
- </View>
176
- </SafeAreaView>
89
+ <View style={{ flex: 1 }}>
90
+ <Markdown
91
+ content="# My Blog Post"
92
+ theme={isDarkMode ? "dark" : "light"}
93
+ // Optional: Customize themes
94
+ defaultDarkTheme={myDarkTheme}
95
+ />
96
+ </View>
177
97
  );
178
98
  }
179
99
  ```
180
100
 
181
101
  ## API Reference
182
102
 
183
- ### `RazorpayCheckout` Props
184
-
185
- | Prop | Type | Description |
186
- | ----------- | ---------------------- | ---------------------------------------------------------------------- |
187
- | `options` | `RazorpayOptions` | Configuration object for Razorpay checkout. |
188
- | `onSuccess` | `(data: any) => void` | Callback function triggered on successful payment. |
189
- | `onFailure` | `(error: any) => void` | Callback function triggered on payment failure. |
190
- | `onClose` | `() => void` | Callback function triggered when the checkout close button is pressed. |
103
+ ### `<Markdown />`
191
104
 
192
- ### `useRazorpay` Hook
105
+ | Prop | Type | Default | Description |
106
+ | ------------------- | ------------------- | ----------------------- | --------------------------------------------- |
107
+ | `content` | `string` | **Required** | The raw markdown string to render. |
108
+ | `theme` | `"light" \| "dark"` | `"light"` | Controls the rendering mode of the component. |
109
+ | `defaultLightTheme` | `ThemeConfig` | `Default Light Palette` | Custom colors for light mode. |
110
+ | `defaultDarkTheme` | `ThemeConfig` | `Default Dark Palette` | Custom colors for dark mode. |
193
111
 
194
- Returns:
112
+ ### ThemeConfig Interface
195
113
 
196
- - `openCheckout(options: RazorpayOptions, callbacks: RazorpayCallbacks)`: Function to open the checkout.
197
- - `closeCheckout()`: Function to manually close the checkout (useful in `onSuccess`).
114
+ The theme objects (`defaultLightTheme` and `defaultDarkTheme`) should follow this structure:
198
115
 
199
- ### `RazorpayOptions`
200
-
201
- | Field | Type | Required | Description |
202
- | ----------------- | -------- | --------- | ----------------------------------------------------------------------------------------- |
203
- | `key` | `string` | **Yes** | Your Razorpay Key ID. |
204
- | `amount` | `number` | **Yes** | Amount in lowest currency unit (e.g., paise). |
205
- | `currency` | `string` | **Yes** | Currency code (e.g., "INR"). |
206
- | `order_id` | `string` | **Yes\*** | Order ID generated from backend. (\*Either `order_id` or `subscription_id` is mandatory). |
207
- | `subscription_id` | `string` | **Yes\*** | Subscription ID for recurring payments. |
208
- | `name` | `string` | No | Name of your company/app. |
209
- | `description` | `string` | No | Description of the transaction. |
210
- | `image` | `string` | No | URL to your logo. |
211
- | `prefill` | `object` | No | Object containing `name`, `email`, `contact`. |
212
- | `theme` | `object` | No | Object containing `color` (hex code). |
213
-
214
- - Either order_id or subscription_id is required.
215
-
216
- ⚠️ Disclaimer
217
- This is an independent, community-maintained project and is not affiliated
218
- with or endorsed by Razorpay or Expo.
116
+ ```typescript
117
+ interface ThemeConfig {
118
+ backgroundColor: string;
119
+ textColor: string;
120
+ codeBackgroundColor: string;
121
+ primaryColor: string;
122
+ secondaryColor: string;
123
+ }
124
+ ```
219
125
 
220
126
  ## License
221
127
 
222
- MIT
128
+ MIT © [CodeArcade](https://github.com/codearcade-io)