A simple ToDo list.
You can access the storybook for this component here.
Name | Type | Required | Default | Description |
---|---|---|---|---|
classNameItem | CSSProperties | no | ... | The className for an item |
classNameList | CSSProperties | no | ... | The className for the list |
items | Task[] | no | [] | The initial list of items |
onChange | (items: Task[]) => void | yes | - | The function called when there are changes in the list of items |
styleItem | CSSProperties | no | ... | The custom style for an item |
styleList | CSSProperties | no | ... | The custom style for the list |
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | yes | - | The unique if of the item |
text | string | yes | - | The text representing the item |
done | boolean | no | false | It is true if the task was completed |
ListOfTodos uses | React |
---|---|
1.0.x | 16.8.0 |
1.1.x | 16.9.0 |
2.0.x | >=18.0.0 |
- Major - it will be increased if any major version of any dependat package changes or there are breaking changes in this package
- Minor - it will be increased if any minor or patch version of any dependat package changes or there is added functionality in a backwards compatible manner
- Patch - it will be increased if there are backwards compatible bug fixes
Displaying a list having initially two items:
import * as React from "react";
import ListOfTodos from "list-of-todos";
class App extends React.Component {
private items: Task[] = [
{
id: '1',
text: 'Text 1',
done: true
},
{
id: '2',
text: 'Text 2'
}
];
render() {
return (
<div className="App">
<ListOfTodos items={this.items} onChange={this.handleChange} />
</div>
);
}
handleChange = (items: Task[]) => console.log({ items });
}
export default App;
- list-of-todos is made publicly available
- Inlined the icons in buttons
- Fixed the layout
- Added a second argument to onChange
- Added a key for react when rendering a task in the list
- Updated packages
- Updated packages
- Moved from npm to yarn
- Updated packages
- Updated packages
- Fixed crash produced by "export * from"
- Added two new props: classNameItem and classNameList
- Accepting React 17 as peerDependencies
- Fixed security warnings
- Updated packages
- Supports minimum React 18
- Updated packages
- Fixed bundled lib