\n )\n}\n\nexport default Component;\n```\n\n\n\n### Input\n\nPROPS \n`value` - The text inside the input that the user enters (this is based on state) \n`type` - The type of input field you need ex:(\"text\", \"email\", \"number\", \"password\") \n`onChange` - Function to change the state of the value. \n`name` - Takes a string if you are wanting to use formData for state change. \n`placeholder` - Placeholder/ Label for the input \n`required` - Is this a required field or not? Takes a boolean value. \n`customClass` - adds a custom class to the container of the Modal
\n )\n}\n\nexport default Component;\n```\n\n\n\n### Textarea\n\nPROPS \n`value` - The text inside the input that the user enters (this is based on state) \n`onChange` - Function to change the state of the value. \n`placeholder` - Placeholder/ Label for the textarea \n`rows` - General height of the textarea \n`required` - Is this a required field or not? Takes a boolean value. \n`customClass` - adds a custom class to the container of the Modal
\n )\n}\n\nexport default Component;\n```\n[top](#table-of-contents)\n### Radio\n\nPROPS \n`options` - takes an array of Integers or Strings and displays these values as options \n`name` - sets a title for the radio group to tie the different radio options to a group \n`inline` - Boolean value to force radio to inline. (Defaults to a column view) \n`onChange` - Accepts a state function \n`state` - REQUIRED** changes the state from the onChange prop \n`customClass` - adds a custom class to the container of the Radio
\n\n```\nimport React, { useState } from 'react';\nimport { Radio } from '57wng/dist';\n\nconst Component = () => {\n const [state, setState] = useState('');\n\n return (\n
\n setState(event)}\n state={state}\n />\n
\n )\n}\n\nexport default Component;\n```\n\n\n### Input\n\nPROPS \n`value` - The text inside the input that the user enters (this is based on state) \n`onChange` - Function to change the state of the value. \n`label` - Label for the slider \n`min` - Minimum value for slider \n`max` - Maximum value for slider \n`step` - Sets the increment of values in a given slider \n`size` - height of the slider \n`defaultValue` - Sets the default number for a slider \n`required` - Is this a required field or not? Takes a boolean value. \n`customClass` - adds a custom class to the container of the Modal
\n )\n}\n\nexport default Component;\n```\n\n\n\n[top](#table-of-contents)\n### Dropdown\n\nPROPS \n`label` - The title of the dropdown that the user enters. \n`value` - This is the parent component's state. \n`setState` - Function to change the state of the value. \n`options` - Array of available options under the dropdown menu. \n`customClass` - adds a custom class to the container of the Dropdown
\n )\n}\n\nexport default Component;\n\n```\n\n\n\n## INFO DISPLAY\n\n[top](#table-of-contents)\n### Card\n\nPROPS \n`color` - passing the string \"dark\" will make it have a dark background with light text. \n`elevation` - Enter a number 1 - 5. The higher the number the more it appears to hover. \n`hover` - Boolean. If this is true then the card will appear to elevate when you hover over it. \n`customClass` - adds a custom class to the container of the Card
\n\n```\nimport React from 'react;\nimport { Card } from '57wng/dist';\n \nconst Component = () => {\n \n return (\n
\n \n
\n )\n}\n\nexport default Component;\n\n```\n\n\n\n[top](#table-of-contents)\n\n### Modal\nPROPS \n`value` - The text inside the button that opens the modal \n`customClass` - adds a custom class to the container of the Modal
\n\n```\nimport React from 'react';\nimport { Modal } from '57wng/dist';\n\nconst Component = () => {\n return (\n
\n \n
Modal Title
\n
Some Content for the Modal
\n \n )\n}\n\nexport default Component;\n```\n\n\n\n### Avatar\n\nPROPS \n`size` - changes the size of the avatar image \n`image` - url pointing to an image file \n`customClass` - adds a class to the avatar component container
\n )\n}\n\nexport default Component;\n```\n\n\n\n### Loading\n\nPROPS \n`customClass` - adds a custom class to loading container.
\n\nThe 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.
\n\nTo customize the circles color add a `customClass` prop and then select `.external-circle` and `.internal-circle`. to change the color use `stroke: $color;`
\n\n```\nimport React from 'react';\nimport { Loading } from '57wng/dist';\n\nconst Component = () => {\n return (\n
\n \n
\n )\n}\n\nexport default Component;\n```\n\n## TODO \n\n### WHEN EDITING THE TODO LIST PLEASE EDIT README DIRECTLY IN GITHUB.`\n\n### HIGH PRIORITY\n\n#### DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE\n\nif 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.\n\n| tags | in progress | by | example |\n|--|--|--|--|\n| Badge | | | [here](https://mui.com/components/badges/) |\n| Chip | | | [here](https://mui.com/components/chips/) | \n| A | | | [here](https://mui.com/components/links/) |\n\nif 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.\n\n| components | in progress | by | example |\n|--|--|--|--|\n| Alert | | Perri L. | [here](https://mui.com/components/alert/) |\n| Accordion | | | [here](https://mui.com/components/accordion/) |\n| Nav | | | [here](https://material.io/components/navigation-drawer#anatomy) |\n\n\n\n### LOW PRIORITY\n\n#### DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE\n\nif 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.\n\n| tags | in progress | by | example |\n|--|--|--|--|\n| Tooltip | | | [here](https://mui.com/components/tooltips/) |\n| Notification | | | [here](https://mui.com/components/snackbars/) |\n| Paper | | | [here](https://mui.com/components/paper/) |\n\nif 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.\n\n| components | in progress | by | example |\n|--|--|--|--|\n| Table | | | [here](https://mui.com/components/tables/) |\n| Toggle | | | [here](https://mui.com/components/toggle-button/) |\n| GhostLoader | | | [here](https://mui.com/components/skeleton/) |\n| Graph | | | [here](https://material.io/design/communication/data-visualization.html#types) |\n\n[top](#table-of-contents)\n","readmeFilename":"README.md","homepage":"https://github.com/57Admin/componentLibrary#readme","repository":{"type":"git","url":"git+https://github.com/57Admin/componentLibrary.git"},"bugs":{"url":"https://github.com/57Admin/componentLibrary/issues"}}