ui-redpanda - npm explorer

Visit Red Panda Studio for visual examples.

$3

1) Clone the project down.

``

bash

git clone https://github.com/TimothyRedPanda/redpanda-ui.git



2) Move into the correct directory.

bash

cd ./redpanda-ui



3) Install the dependencies and build the project.

bash

npm install



4) Run Storybook to view full UI components documentation.

bash

npm run storybook





Getting Started



1) Install Red Panda UI into your React project.

bash

npm i ui-redpanda@latest



2) Import your desired component and the styles.

typescript

import { Button / Or the component of your choice / } from 'ui-redpanda';

import "ui-redpanda/dist/ui-redpanda.css";





3) Use the component.

typescript

import { Button, Switch, Label, Input, Textbox, Loader } from "ui-redpanda";

import "ui-redpanda/dist/ui-redpanda.css";



const App = () => {

  return (

    

      

      

      

      

      

      

    

  );

};



export default App;





$3



Each component has a

className prop if you wish to add your own class. Just to allow you to reference it in CSS if you wish. Remember though any styles you apply in CSS will have to have the !important

 tag.

css



.yourClass {

  / !important is needed to override the default styles. /

  background-color: #fff !important;

}





Loader



Just a simple loader - no props just import and have fun.



Button



$3



The Button component accepts the following props:



*

children

 (ReactNode, required): The content to be displayed inside the button.



*

onClick

 (function, optional): The function to be called when the button is clicked.



*

variant (string, optional): The style variant, can be contained, outlined or disabled

.



*

size (string, optional): Size of the button, can be small, base(default size) or large

.





Switch



$3



The Switch component accepts the following props:



*

onClick

 (function, optional): The function to be called when the switch is toggled.



*

variant (string, optional): The style variant, can be live or disabled

.



Label



$3



The Label component accepts the following props:



*

label

 (string, required): The actual text the label says.



*

size (string, optional): Text size, can be small, base(default size) or large

.





Input



$3



The Input component accepts the following props:



*

type (string, required): The type of the input, e.g., text, checkbox, radio, number or date

.



*

defaultValue

 (string, optional): The default value of the input.



*

className

 (string, optional): Additional class names for styling the input.



*

onChange

 (function, optional): The function to be called when the input value changes.



*

onClick

 (function, optional): The function to be called when the input is clicked.



*

sanitized (boolean, optional): If you simply -

. Then any text input will be sanitized. If you wish to do your own sanitization then simply leave this off.



Textbox

$3

The Textbox component accepts the following props:



*

rows (number, optional): The number of rows for the textarea. Default is 4

.

*

cols (number, optional): The number of columns for the textarea. Default is 50

.

*

name

 (string, optional): The name attribute of the textarea. Default is "textbox".

*

className

 (string, optional): Additional class names for styling the textarea.

*

onChange

 (function, optional): The function to be called when the textarea value changes.

*

sanitized

 (boolean, optional): If set to true, the input will be sanitized to prevent special characters, HTML, and other potentially dangerous inputs.

*

placeholder

 (string, optional): The placeholder text for the textarea. Default is "Text area...".







Sanitization 

Can be toggled on

Textbox and Input` components -
* Escape special characters.
* HTML tags.
* Script tags.
* Event handlers.
* CSS expressions.

Loader

Just a fun little spinning loader for you. Just import and use for whatever.

Visit Red Panda Studio for visual examples.

$3

1) Clone the project down.

``

bash

git clone https://github.com/TimothyRedPanda/redpanda-ui.git



2) Move into the correct directory.

bash

cd ./redpanda-ui



3) Install the dependencies and build the project.

bash

npm install



4) Run Storybook to view full UI components documentation.

bash

npm run storybook





Getting Started



1) Install Red Panda UI into your React project.

bash

npm i ui-redpanda@latest



2) Import your desired component and the styles.

typescript

import { Button / Or the component of your choice / } from 'ui-redpanda';

import "ui-redpanda/dist/ui-redpanda.css";





3) Use the component.

typescript

import { Button, Switch, Label, Input, Textbox, Loader } from "ui-redpanda";

import "ui-redpanda/dist/ui-redpanda.css";



const App = () => {

  return (

    

      

      

      

      

      

      

    

  );

};



export default App;





$3



Each component has a

className prop if you wish to add your own class. Just to allow you to reference it in CSS if you wish. Remember though any styles you apply in CSS will have to have the !important

 tag.

css



.yourClass {

  / !important is needed to override the default styles. /

  background-color: #fff !important;

}





Loader



Just a simple loader - no props just import and have fun.



Button



$3



The Button component accepts the following props:



*

children

 (ReactNode, required): The content to be displayed inside the button.



*

onClick

 (function, optional): The function to be called when the button is clicked.



*

variant (string, optional): The style variant, can be contained, outlined or disabled

.



*

size (string, optional): Size of the button, can be small, base(default size) or large

.





Switch



$3



The Switch component accepts the following props:



*

onClick

 (function, optional): The function to be called when the switch is toggled.



*

variant (string, optional): The style variant, can be live or disabled

.



Label



$3



The Label component accepts the following props:



*

label

 (string, required): The actual text the label says.



*

size (string, optional): Text size, can be small, base(default size) or large

.





Input



$3



The Input component accepts the following props:



*

type (string, required): The type of the input, e.g., text, checkbox, radio, number or date

.



*

defaultValue

 (string, optional): The default value of the input.



*

className

 (string, optional): Additional class names for styling the input.



*

onChange

 (function, optional): The function to be called when the input value changes.



*

onClick

 (function, optional): The function to be called when the input is clicked.



*

sanitized (boolean, optional): If you simply -

. Then any text input will be sanitized. If you wish to do your own sanitization then simply leave this off.



Textbox

$3

The Textbox component accepts the following props:



*

rows (number, optional): The number of rows for the textarea. Default is 4

.

*

cols (number, optional): The number of columns for the textarea. Default is 50

.

*

name

 (string, optional): The name attribute of the textarea. Default is "textbox".

*

className

 (string, optional): Additional class names for styling the textarea.

*

onChange

 (function, optional): The function to be called when the textarea value changes.

*

sanitized

 (boolean, optional): If set to true, the input will be sanitized to prevent special characters, HTML, and other potentially dangerous inputs.

*

placeholder

 (string, optional): The placeholder text for the textarea. Default is "Text area...".







Sanitization 

Can be toggled on

Textbox and Input` components -
* Escape special characters.
* HTML tags.
* Script tags.
* Event handlers.
* CSS expressions.

Loader

Just a fun little spinning loader for you. Just import and use for whatever.