Twizzle Library (Overview)

Twizzle Library can then be installed using the following commands:

Introduction

Twizzle Library is an open-source React component library that can be used to create components that are reusable and easy to use.

It is a collection of components that can be used to create a variety of different UI elements.

Twizzle Library components come with a variety of different styles and themes that can be customized to fit your needs.

Why Use Twizzle Library?

  • Faster production - Twizzle has components ready to be shipped backed by open source contributors.
  • Reusable components - Components can be used in multiple projects and customized among different styles and themes.
  • Easy to use - Components are easy to use and can be customized usign the Twizzle Library API.

Theming and Styling

Twizzle Library comes with default themes that can be overriden by the user. The default themes that are available are:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 { 'primary'?: { 'backgroundColor': string, 'color': string }, 'secondary'?: { 'backgroundColor': string, 'color': string }, 'loader'?: { 'color': string, }, 'typography'?: { 'fontFamily': string }, 'variants'?: { 'success': {color: string}, 'info': {color: string}, 'warning': {color: string}, 'danger': {color: string} } }

To override the default theme, you can override the wrap your index.js(x)/ts(x) file with the following code:

1 2 3 4 5 6 7 8 import { ThemeContext } from 'twizzle-library'; <ThemeContext.Provider theme={theme}> <App> <ThemeContext.Provider>