j-components-react
Simplistic React component library tailored to the developer
Install
npm install --save j-components-react
Let me know if there is a component you would like me to implement
Components: Search Dropdown, Sortable Table, Dropdown, Toggle, Button
Usage
Search Dropdown
import React, { useCallback } from 'react'
import { SearchDropdown } from 'j-components-react'
const items = [
{ id: '1', text: 'Blue', value: 'bl' },
{ id: '2', text: 'Yellow', value: 'ye' },
{ id: '3', text: 'Green', value: 'gr' },
{ id: '4', text: 'Red', value: 're' },
{ id: '5', text: 'Purple', value: 'pu' }
]
const App = () => {
const handleClick = useCallback((item) => {
console.log('logging clicked item', item)
// {id: "4", text: "Red", value: "re"}
}, [])
return (
<div className='App'>
<SearchDropdown items={items} defaultValue={'Red'}>
{items.map((item) => (
<SearchDropdown.Item
key={item.id}
filterKey={item.id} // required
onClick={handleClick} // optional
>
{item.text}
</SearchDropdown.Item>
))}
</SearchDropdown>
</div>
)
}
Sortable Table
import React from 'react'
import { Table } from 'j-components-react'
const items = [
{ name: 'Alexis', age: 29, location: 'New York' },
{ name: 'Rachel', age: 25, location: 'Texas' },
{ name: 'Ben', age: 27, location: 'Nevada' },
{ name: 'Jack', age: 35, location: 'Alabama' },
{ name: 'Max', age: 38, location: 'California' },
{ name: 'Jessica', age: 37, location: 'Florida' }
]
const headerCells = ['name', 'age', 'location']
const TableExample = () => {
return <Table items={items} headerCells={headerCells} />
}
TESTING
npm jest --watch
License
MIT © justinhessdev