Please update the in progress chart at the bottom of ReadMe.
Feature/Bug/Hotfix_NameOfComponent_BranchedFrom_ByDeveloper
Feature/Radio_Main_FirstNameLastName
README text editor
Install - npm i 57wng
Import - import {Componenent} from '57wng/dist';
This will go in your variables.scss file.
$primary: #00308f;
$secondary: #d1af3a;
$success: #4acc4b;
$warn: #f3d60e;
$danger: #c50400;
$white: #efefef;
$black: #111111;
$grey-light: #ccc;
$grey: #888;
$grey-dark: #444;
@import '../node_modules/57wng/src/Style/import.scss';
@import '../node_modules/57wng/src/Style/variable.scss';
@import '../node_modules/57wng/src/Style/main.scss';
PROPS
value - The text inside the button
color - color of the button ("primary", "secondary", "success", "warn", "danger")
onClick - Function to be called when the button is clicked.
customClass - adds a custom class to the container of the Button
import React from 'react';
import { Button } from '57wng/dist';
const Component = () => {
const buttonTest = () => {
console.log("Button is working");
};
return (
<div>
<Button
value="Button Text"
color="primary"
onClick={() => buttonTest()}
customClass="custom-button-class"
/>
</div>
)
}
export default Component;
PROPS
value - The text inside the input that the user enters (this is based on state)
type - The type of input field you need ex:("text", "email", "number", "password")
onChange - Function to change the state of the value.
name - Takes a string if you are wanting to use formData for state change.
placeholder - Placeholder/ Label for the input
required - Is this a required field or not? Takes a boolean value.
customClass - adds a custom class to the container of the Modal
import React, { useState } from 'react;
import { Input } from '57wng/dist';
const Component = () => {
const [text, setText] = useState('');
return (
<div>
<Input
value={text}
type="text"
placeholder="Text Placeholder"
required={true}
onChange={(event) => setText(event)}
customClass="custom-input-class"
/>
</div>
)
}
export default Component;
PROPS
value - The text inside the input that the user enters (this is based on state)
onChange - Function to change the state of the value.
placeholder - Placeholder/ Label for the textarea
rows - General height of the textarea
required - Is this a required field or not? Takes a boolean value.
customClass - adds a custom class to the container of the Modal
import React, { useState } from 'react;
import { Textarea } from '57wng/dist';
const Component = () => {
const [text, setText] = useState('');
return (
<div>
<Textarea
value={text}
type="text"
rows={5}
placeholder="Text Placeholder"
required={true}
onChange={(event) => setText(event)}
customClass="custom-textarea-class"
/>
</div>
)
}
export default Component;
PROPS
options - takes an array of Integers or Strings and displays these values as options
name - sets a title for the radio group to tie the different radio options to a group
inline - Boolean value to force radio to inline. (Defaults to a column view)
onChange - Accepts a state function
state - REQUIRED** changes the state from the onChange prop
customClass - adds a custom class to the container of the Radio
import React, { useState } from 'react';
import { Radio } from '57wng/dist';
const Component = () => {
const [state, setState] = useState('');
return (
<div>
<Radio
customClass="custom-radio-class"
options={['Option 1', 'Option 2']}
name={'TEST'}
inline={true}
onChange={(event) => setState(event)}
state={state}
/>
</div>
)
}
export default Component;
### Input
PROPS
value - The text inside the input that the user enters (this is based on state)
onChange - Function to change the state of the value.
label - Label for the slider
min - Minimum value for slider
max - Maximum value for slider
step - Sets the increment of values in a given slider
size - height of the slider
defaultValue - Sets the default number for a slider
required - Is this a required field or not? Takes a boolean value.
customClass - adds a custom class to the container of the Modal
import React, { useState } from 'react;
import { Slider } from '57wng/dist';
const Component = () => {
const [text, setValue] = useState('');
return (
<div>
<Slider
value={text}
defaultValue={30}
label="Slider Label"
required={true}
size={"md"}
step={10}
min={0}
max={100}
onChange={(event) => setValue(event)}
customClass="custom-slider-class"
/>
</div>
)
}
export default Component;
PROPS
label - The title of the dropdown that the user enters.
value - This is the parent component's state.
setState - Function to change the state of the value.
options - Array of available options under the dropdown menu.
customClass - adds a custom class to the container of the Dropdown
import React, { useState } from 'react;
import { Dropdown } from '57wng/dist';
const Component = () => {
const [state, setState] = useState('');
return (
<div>
<Dropdown
label={'text'}
value={state}
setState={(event) => setState(event)}
options={[]}
customClass="custom-dropdown-class"
/>
</div>
)
}
export default Component;
PROPS
color - passing the string "dark" will make it have a dark background with light text.
elevation - Enter a number 1 - 5. The higher the number the more it appears to hover.
hover - Boolean. If this is true then the card will appear to elevate when you hover over it.
customClass - adds a custom class to the container of the Card
import React from 'react;
import { Card } from '57wng/dist';
const Component = () => {
return (
<div>
<Card
color="dark"
elevation={3}
hover={true}
customClass="custom-dropdown-class"
/>
</div>
)
}
export default Component;
PROPS
value - The text inside the button that opens the modal
customClass - adds a custom class to the container of the Modal
import React from 'react';
import { Modal } from '57wng/dist';
const Component = () => {
return (
<div>
<Modal value="Open Modal" customClass="custom-modal-class">
<h1>Modal Title</h1>
<p>Some Content for the Modal</p>
</Modal
</div>
)
}
export default Component;
PROPS
size - changes the size of the avatar image
image - url pointing to an image file
customClass - adds a class to the avatar component container
| Size | size |
|---|---|
| "lg" | 200px |
| "md" | 100px |
| "sm" | 50px |
import React from 'react';
import { Avatar } from '57wng/dist';
const Component = () => {
return (
<div>
<Avatar size="md" image="image.jpg" customClass="custom-avatar-class"/>
</div>
)
}
export default Component;
PROPS
customClass - adds a custom class to loading container.
The loading component does not take any customization props. The external spinning circle is the $secondary color and the inner spinning circle is the $primary color.
To customize the circles color add a customClass prop and then select .external-circle and .internal-circle. to change the color use stroke: $color;
import React from 'react';
import { Loading } from '57wng/dist';
const Component = () => {
return (
<div>
<Loading customClass="custom-loading-class"/>
</div>
)
}
export default Component;
if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.
| tags | in progress | by | example |
|---|---|---|---|
| Badge | here | ||
| Chip | here | ||
| A | branch | Cristian A. | here |
if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.
| components | in progress | by | example |
|---|---|---|---|
| Alert | branch | Perri L. | here |
| Accordion | here | ||
| Nav | branch | Evan Mc. | here |
if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.
| tags | in progress | by | example |
|---|---|---|---|
| Tooltip | here | ||
| Notification | here | ||
| Paper | here |
if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.
| components | in progress | by | example |
|---|---|---|---|
| Table | here | ||
| Toggle | here | ||
| GhostLoader | here | ||
| Graph | here |