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"
            />

| 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