diff --git a/README.md b/README.md index 6ec82b3..bb34692 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,15 @@ Make sure you're on a supported version of React and React DOM: ```sh npm i react@^16.9 react-dom@^16.9 + +# or use the latest and greatest react +npm i react react-dom ``` +### Using Preact? + +PCR seamlessly integrates with Preact :sunglasses:, you don't even need to include `preact/compat`! + ## Basic Usage PCR components are easy to use and require no additional setup. Use as controlled or uncontrolled, use with hooks or with classes, and pass all the props you want -- it's all forwarded to the underlying `input` element. Hungry for more? Head on over the the [doc site](https://pretty-checkbox-react.netlify.app/). diff --git a/docs/docs/usage/preact.md b/docs/docs/usage/preact.md new file mode 100644 index 0000000..41632ad --- /dev/null +++ b/docs/docs/usage/preact.md @@ -0,0 +1,57 @@ +--- +id: preact +title: Preact +--- + +PCR works out of the box with Preact 10 due to the simplicity of the components. Literally can't get any easier :wink:. + +## Install + +```sh +npx preact-cli preactjs-templates/simple preact_app +cd preact_app +npm i pretty-checkbox pretty-checkbox-react +``` + +## Usage + +From the `index.js` file in your Preact app: + +```jsx +import { Checkbox, useCheckboxState } from 'pretty-checkbox-react'; +import '~/pretty-checkbox'; + +export default function App() { + const checkbox = useCheckboxState(); + + return ( + <> + It lives! +

Checked: {checkbox.state + ''}

+ + ); +} +``` + +Wowza 🤯 so easy! + +### Usage with Hooks + +As per the Preact docs, we can use hooks from `preact/hooks` or from `preact/compat`: + +```jsx +import { useRef, useEffect } from 'preact/hooks'; +import { Checkbox } from 'pretty-checkbox-react'; + +import '~/pretty-checkbox'; + +export default function App() { + const ref = useRef(null); + + useEffect(() => { + console.log(ref); + }, []); + + return It lives!; +} +``` diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 618c556..6615bb9 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -123,6 +123,10 @@ module.exports = { label: 'API Reference', to: 'docs/api/checkbox/', }, + { + label: 'Alternative Technologies', + to: 'docs/api/usage/preact', + }, ], }, { @@ -142,7 +146,7 @@ module.exports = { copyright: `Made with \u2665 by Dennis Thompson & Docusaurus \uFF5C © ${new Date().getFullYear()}`, }, algolia: { - apiKey: process.env.ALGOLIA_KEY, + apiKey: process.env.ALGOLIA_KEY || 'abc', indexName: 'pretty-checkbox-react', searchParameters: {}, // Optional (if provided by Algolia) }, diff --git a/docs/sidebars.js b/docs/sidebars.js index aa89bb6..5b9f3d9 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -29,5 +29,8 @@ module.exports = { { 'Migration Guide': ['migration/migrating-2.x', 'migration/migrating-1.x'], }, + { + 'Other Technologies': ['usage/preact'], + }, ], };