xellanix-react
v2.2.4
Published
A react stylesheet and components from xellanix
Downloads
104
Maintainers
xellanixReadme
Xellanix Stylesheets and Components for React
Installation and Setup
- To install this package, run this command on the terminal:
pnpm i xellanix-react- Before using any component, you must import the default stylesheet into the first line of your
main.tsxfile or the starting point of your React application that is used for initial rendering and setup.
import "xellanix-react/style.css";- Add the
light-themeordark-themeclass in thebodytag. - Add the
body-wrapperclass to thedivtag, which is a child of thebodytag (commonly used as the root for React), so that it looks at least like this. - Once all the required classes have been added, it should at least look like this.
<body class="light-theme">
<div class="body-wrapper" id="root"></div>
<!-- OTHER SCRIPTS -->
</body>Usage
- To use the component, just import it like this:
import { Slider } from "xellanix-react";- Add the imported component to the layout:
return (
<div>
{/* other elements */}
<Slider min={0}
max={1000}
step={2}
initialValue={20}
/>
{/* other elements */}
</div>
)For more information, please see the available documentation.
Available Components
InfoBoxPopupProviderSliderSliderInput(slider text input forSlidercomponent)ToggleSwitch
Available Types and Enums
InfoStatus(forInfoBoxcomponentstatus)
Available Hooks
usePopup(PopupProviderhook)useSlider(Sliderref hook)