-
Notifications
You must be signed in to change notification settings - Fork 104
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(example): add typescript example
- Loading branch information
Showing
19 changed files
with
21,963 additions
and
12,550 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React, { StrictMode, ChangeEvent, forwardRef } from 'react'; | ||
import { view as v, store as s } from 'react-easy-state'; | ||
import { render, cleanup } from '@testing-library/react/pure'; | ||
|
||
const store = s({ | ||
name: 'Peter', | ||
setNameEvent(ev: ChangeEvent<HTMLInputElement>) { | ||
if (ev.target) { | ||
this.name = ev.target.value; | ||
} | ||
}, | ||
}); | ||
|
||
// properly retain these props for the views | ||
type AppProps = { | ||
greeting: string; | ||
}; | ||
|
||
const App = v( | ||
forwardRef<HTMLLabelElement, AppProps>( | ||
({ greeting, children }, ref) => ( | ||
<div> | ||
<h1> | ||
{greeting} {store.name}! | ||
</h1> | ||
<label ref={ref} htmlFor="name"> | ||
Name: | ||
</label> | ||
<input | ||
id="name" | ||
value={store.name} | ||
onChange={store.setNameEvent.bind(store)} | ||
/> | ||
{children} | ||
</div> | ||
), | ||
), | ||
); | ||
|
||
describe('Using TypeScript App', () => { | ||
afterAll(cleanup); | ||
|
||
test('should render without warnings', () => { | ||
const { container } = render( | ||
<StrictMode> | ||
<App greeting="Hello" /> | ||
</StrictMode>, | ||
); | ||
expect(container).toHaveTextContent('Hello'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# TypeScript usage example · [Live Demo](https://RisingStack.github.io/react-easy-state/examples/typescript-usage/build) | ||
|
||
An example that shows how to use react-easy-state with TypeScript. Simple input field which uses a global store to persist its state. Showcases how stores and views both retain their shape of objects and parameters when wrapped with react-easy-state. |
Oops, something went wrong.