json-pretty-textarea

1.1.7 • Public • Published

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


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"
            />
  );
};

CodeSandBox Sample

[json-pretty-textarea]https://codesandbox.io/s/json-pretty-textarea-qus7dk

Contributing

For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Package Sidebar

Install

npm i json-pretty-textarea

Weekly Downloads

27

Version

1.1.7

License

MIT

Unpacked Size

27 kB

Total Files

16

Last publish

Collaborators

  • masoud_naji