Json-pretty-textarea NPM

JSON pretty Textarea

JSON pretty Textareais a React library for dealing with json files and showing them on textarea.

Installation

Use the package manager npm to install json-pretty-textarea.

npm i json-pretty-textarea

Usage

# import 
import { JsonPrettierTextarea } from "json-pretty-textarea";

# return
 <JsonPrettierTextarea
              prettyjson={MockDocument}
              preBcl="white"
              stringCl="blue"
              numberCl="blue"
              booleanCl="red"
              nullCl="violet"
              keyCl="red"
              string_font_size="1rem"
              number_font_size="1rem"
              boolean_font_size="1rem"
              null_font_size="1rem"
              key_font_size="1rem"
              height="300px"
              width="300px"
              borderRadius="10px"
            />

alt text

Property	type	Default	Description
prettyjson	json data	MockDocument	Source File json
preBcl	CSS	white	Textarea BackGround color
stringCl	CSS	green	String Values color
numberCl	CSS	darkorange	number Values color
booleanCl	CSS	blue	boolean Values color
nullCl	CSS	magenta	null Values color
keyCl	CSS	red	key Values color
string_font_size	CSS	1rem	font_size
number_font_size	CSS	1rem	font_size
boolean_font_size	CSS	1rem	font_size
null_font_size	CSS	1rem	font_size
key_font_size	CSS	1rem	font_size
height	CSS	100%	textarea height
width	CSS	100%	textarea width
borderRadius	CSS	0.5rem	border radius

Sample Code

import MockDocument from "./MOCK_DATA.json";
import { JsonPrettierTextarea } from "json-pretty-textarea";
export const test = () => {
  return (
  <JsonPrettierTextarea
              prettyjson={MockDocument}
              preBcl="white"
              stringCl="green"
              numberCl="skyblue"
              booleanCl="orange"
              nullCl="violet"
              keyCl="black"
              string_font_size="1rem"
              number_font_size="1rem"
              boolean_font_size="1rem"
              null_font_size="1rem"
              key_font_size="1.2rem"
              height="500px"
              width="800px"
              borderRadius="10px"
            />
  );
};