txd-components

@savedaily/txd-components

A React component library for devlopment ease. txd-components is a private npm package (@savedaily/txd-components) offering a versatile collection of React components for rapid layout and UI development. Designed to streamline React application development, txd-components empowers developers with pre-built components and utilities to create modern, responsive interfaces efficiently.

Installation

To install txd-components for use in your React application, first ensure that you have access to the npm package registry where the library is published. Since txd-components is a private npm package, you'll need to be logged in to the npm account that has access to this private package.

Once authenticated, you can install txd-components using npm:

npm install @savedaily/txd-components

Getting Setup

After installing txd-components, ensure that styling is applied to pre-built components by importing the provided stylesheet into your project. Failure to include this stylesheet will result in unstyled components.

In JavaScript/TypeScript:

In your index.js or index.tsx file, import the stylesheet:

import '@savedaily/txd-components/style.css';

In Stylesheets:

Or you can import the same file into your root style file such as index.css or App.css

@import url('@savedaily/txd-components/style.css');

Custome Styling:

If you're using our component library for an application that already utilizes Tailwind CSS, you're in luck! Our components are built on Tailwind CSS, allowing for seamless integration with your project's existing styling setup. Simply ensure that Tailwind CSS is configured and included in your project, and our components will inherit the styling accordingly.

Components

• TXDButton (A variety of buttons that have been created for developer ease)
• TXDText (A dynamiuc component to handle the typography of the components)
• TXDInputs (Different variants for Inputs so that user just import and use it)
• TXDBox (Simply just like a Div to create containers.)
• TXDSelect (A cpmponent to handle the <select> component)
• TXDFlex (A component with all of the flexbox properties)
• TXDTextarea (A component with all of the flexbox properties)
• TXDCheckbox (Handle checkboxes by just giving the array of data)
• TXDImage (Prebuilt components to use the image and its properties (i:e size, width, height))
• TXDRadio (Handle radio buttons by just giving the array of data)
• TXDTable (A table component to use dynamically render the data and as well as Datatable)