react-redactor 1.0.0

package/README.md

@@ -0,0 +1,115 @@
+
+# Redactor
+
+Redactor is a lightweight library for conditional rendering, context management, and navigation in React applications.
+
+## Features
+- Simple badge-based access control using React Context.
+- Conditional rendering with the `Protect` component.
+- Easy navigation with the `useProtection` hook.
+
+## Installation
+
+Install the module via npm:
+
+```
+npm install react-redactor
+```
+
+## Usage
+
+### 1. Badge Context (`useBadge` and `BadgeProvider`)
+
+Wrap your app or part of it with the `BadgeProvider` to set a badge value.
+
+```jsx
+import React from "react";
+import { useBadge, BadgeProvider } from "your-react-badge-module";
+
+function App() {
+    return (
+        <BadgeProvider value={true}>
+            <ChildComponent />
+        </BadgeProvider>
+    );
+}
+
+function ChildComponent() {
+    const badge = useBadge();
+
+    return <h1>Badge Value: {badge ? "Authorized" : "Unauthorized"}</h1>;
+}
+```
+
+### 2. Conditional Rendering with `Protect`
+
+Use the `Protect` component to conditionally render components based on the badge value.
+
+```jsx
+import React from "react";
+import { Protect } from "your-react-badge-module";
+
+const ProceedComponent = () => <h1>Welcome!</h1>;
+const ReturnComponent = () => <h1>Access Denied!</h1>;
+
+function App() {
+    const badgeValue = true; // Example badge value
+
+    return (
+        <Protect
+            Proceed={ProceedComponent}
+            Return={ReturnComponent}
+            badgeValue={badgeValue}
+        />
+    );
+}
+```
+
+### 3. Navigation with `useProtection`
+
+Redirect users based on a validation function.
+
+```jsx
+import React from "react";
+import { useProtection } from "your-react-badge-module";
+
+function App() {
+    const validationFunc = () => true; // Replace with your logic
+
+    useProtection(validationFunc, "/dashboard", "/login");
+
+    return <h1>Redirecting...</h1>;
+}
+```
+
+## API Reference
+
+### `useBadge`
+- **Description**: Access the current badge value from the context.
+- **Returns**: The current badge value.
+
+### `BadgeProvider`
+- **Props**:
+  - `value` (any): The value to set in the badge context.
+  - `children` (ReactNode): The components to render within the provider.
+
+### `Protect`
+- **Props**:
+  - `Proceed` (React.ComponentType): The component to render if `badgeValue` is `true`.
+  - `Return` (React.ComponentType): The component to render if `badgeValue` is `false`.
+  - `badgeValue` (boolean): Determines which component to render.
+
+### `useProtection`
+- **Parameters**:
+  - `validationFunc` (Function): A function that returns `true` or `false`.
+  - `goto_url` (string): The URL to navigate to if validation passes.
+  - `returnto_url` (string): The URL to navigate to if validation fails.
+- **Effect**: Redirects the user based on `validationFunc`.
+
+## License
+
+This library is licensed under the MIT License. See the LICENSE file for details.
+
+## Contributing
+
+Feel free to open issues or pull requests on the [GitHub repository](https://github.com/websitedeb/Redactor).

package/index.js

@@ -0,0 +1,3 @@
+export { useBadge, BadgeProvider } from "./src/Badge";
+export { Protect } from "./src/Protect";
+export { useProtection } from "./src/useProtection";

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-redactor",
+  "version": "1.0.0",
+  "description": "Redactor is a lightweight library for conditional rendering, context management, and navigation in React applications.",
+  "main": "index.jsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "redactor",
+    "router",
+    "route-protector"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-router-dom": "^7.0.1"
+  }
+}

package/src/Badge.js

@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from "react";
+
+// Badge Context
+const BadgeContext = createContext(null);
+
+/**
+ * `Badge` Hook
+ * Allows consumers to access the BadgeContext value.
+ * @returns {*} Context value
+ */
+export function useBadge() {
+    return useContext(BadgeContext);
+}
+
+/**
+ * `Provider` Component
+ * Wraps children with BadgeContext.Provider
+ * @param {Object} props
+ * @param {*} props.value - The value to pass to the context.
+ * @param {React.ReactNode} props.children - Components to render within the provider.
+ */
+export function BadgeProvider({ value, children }) {
+    return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>;
+}

package/src/Protect.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+/**
+ * `Protect` Component
+ * Conditionally renders one of two components based on a badge value.
+ * @param {Object} props
+ * @param {React.ComponentType} props.Proceed - Component to render if badgeValue is true.
+ * @param {React.ComponentType} props.Return - Component to render if badgeValue is false.
+ * @param {boolean} props.badgeValue - Determines which component to render.
+ */
+export function Protect({ Proceed, Return, badgeValue }) {
+    return badgeValue ? <Proceed /> : <Return />;
+}

package/src/useProtection.js

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+/**
+ * ;)
+ * `useProtection` Hook
+ * Redirects based on a validation function's result.
+ * @param {Function} validationFunc - A function that returns a boolean.
+ * @param {string} goto_url - URL to navigate to if the validation passes.
+ * @param {string} returnto_url - URL to navigate to if the validation fails.
+ */
+export function useProtection(validationFunc, goto_url, returnto_url) {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (validationFunc()) {
+            navigate(goto_url);
+        } else {
+            navigate(returnto_url);
+        }
+    }, [validationFunc, goto_url, returnto_url, navigate]);
+}