Library created for the purpose of personal improvement in the creation of stylized components and publication of libs in npm. The goal here is just learning, but if this lib is useful to you feel free to make suggestions and improve it so that it suits your problems and those of the community.
To install:
npm install components-react-lib-styled
For this lib the Styled Components were used to create CSS styles in JavaScript files. The Storybook was used to visualize the components.
This Lib has fully customizable components and new components may be added in the future. To view the components you can run the Storybook on your machine and select the components you want to see.
Standard buttons in 3 formats: Default, Outline and Disable. To use the Outline and Disable buttons just pass the respective properties: outline and disable.
To customize the component, you must pass the values as a string for keywords backgroundColor, borderRadius and color (font color).
Check out how to customize the component:
import { Button } from 'components-react-lib-styled'
/*
***Your code...
*/
<Button
backgroundColor="#007fff"
borderRadius="50px"
color="#fff"
>
Default
</Button>*You can use the components in their standard form without having to pass these settings
To customize the component, you must pass the values as a string for keywords borderRadius, gradientColor (pass the direction and colors to be used separated by a comma), shadowColor and color (font color).
Check out how to customize the component:
import { ButtonGradient } from 'components-react-lib-styled'
/*
***Your code...
*/
<ButtonGradient
borderRadius="20px"
gradientColor="top, #000046, #1cb5e0"
shadowColor="#000046"
color="#fff"
>
Default
</ButtonGradient>*You can use the components in their standard form without having to pass these settings
You must always pass a value for the title property in this component
To customize the component, you must pass the values as a string for keywords backgroundColor, borderRadius and color (font color).
Check out how to customize the component:
import { Card } from 'components-react-lib-styled'
/*
***Your code...
*/
<Card
title="Title of the card"
backgroundColor="#2f2e35"
borderRadius="10px"
color="#ddd"
>
Card contents
</Card>*You can use the components in their standard form without having to pass these settings
The name, label and value are required attributes for this component.
There is the possibility to leave a checked value by default, just put the property defaultChecked={true}
To customize the component, you must pass the values as a string for keywords markColor and color (font color).
Check out how to customize the component:
import { CheckBox } from 'components-react-lib-styled'
/*
***Your code...
*/
<CheckBox
color="#fff"
markColor="#007fff"
name="checkbox"
label="label"
value={/* Any types */}
checked={/* Boolean value */}
onChange={() => {}}
/>*You can use the components in their standard form without having to pass these settings
The name, value and setValue are required attributes for this component.
This component can receive an icon from your favorite icon library through the icon property. In our example we are importing the icon MdSearch from the React-Icons/Material-Design library.
To customize the component, you must pass the values as a string for keywords backgroundColor, borderRadius, color (font color), inputColor, placeholderColor and type (text by default).
Check out how to customize the component: (See the example using React Hooks)
import React, { useState } from 'react'
import { Input } from 'components-react-lib-styled'
import { MdSearch } from 'react-icons/md'
/*
***Your code...
*/
const [inputValue, setInputValue] = useState('')
/*
***Your code...
*/
<Input
backgroundColor="#1c1b20"
borderRadius="5px"
color="#fff"
inputColor="#007fff"
placeholderColor="rgba(255, 255, 255, 0.2)"
type="text"
name="input"
icon={<MdSearch />}
placeholder="Type here..."
value={inputValue}
setValue={setInputValue}
/>*You can use the components in their standard form without having to pass these settings
The title, open and setOpen are required attributes for this component.
To customize the component, you must pass the values as a string for keywords backgroundColor, borderRadius, color (font color), colorTitle and closeColor (color of the icon that closes the modal).
Check out how to customize the component: (See the example using React Hooks)
import React, { useState } from 'react'
import { Modal, Button } from 'components-react-lib-styled'
/*
***Your code...
*/
const [open, setOpen] = useState(false)
/*
***Your code...
*/
<div>
<Button onClick={() => setOpen(true)}>Open modal</Button>
<Modal
backgroundColor="#2f2e35"
borderRadius="8px"
color="#d5d5d5"
colorTitle="#fff"
closeColor="rgba(255, 255, 255, 0.3)"
title="Modal Title"
open={open}
setOpen={setOpen}
>
Modal contents
</Modal>
</div>*You can use the components in their standard form without having to pass these settings
The name, label and value are required attributes for this component.
There is the possibility to leave a checked value by default, just put the property defaultChecked={true}
To customize the component, you must pass the values as a string for keywords radioColor, markColor and color (font color).
Check out how to customize the component:
import { Radio } from 'components-react-lib-styled'
/*
***Your code...
*/
<Radio
color="#fff"
radioColor="#007fff"
markColor="#fff"
name="radio"
label="label"
value={/* Any types */}
checked={/* Boolean value */}
onChange={() => {}}
/>*You can use the components in their standard form without having to pass these settings
To customize the component, you must pass the value as a string for keyword color (you must pass two or more colors separating them with a comma).
Check out how to customize the component:
import { Separator } from 'components-react-lib-styled'
/*
***Your code...
*/
<Separator color = '#1a1a1f, #007fff, #1a1a1f' />*You can use the components in their standard form without having to pass these settings
To customize the component, you must pass the values as a string for keywords fontSize and color (font color, to work correctly put two or more colors separating them with a comma).
Check out how to customize the component:
import { Title } from 'components-react-lib-styled'
/*
***Your code...
*/
<Title
color = '#007fff, #33333399'
fontSize="30px"
>
Title
</Title>*You can use the components in their standard form without having to pass these settings
To run the Storybook use the command npm run storybook in the application's root directory.